关于socket.io:SocketIO-解决-WebSocket-通信

大家好呀，我是小菜~

本文次要介绍 Socket.IO

微信公众号已开启，小菜良记，没关注的同学们记得关注哦！

在介绍 Socket.IO 之前, 咱们先思考一个问题, 如果这个时候有个需要, 相似实现 人工客服 的性能该如何实现?

在线客服，需要了解起来很简略，就相当于一个 web 的聊天页面，也就是客户端可能即时拉取到服务端的响应

当然, 作为接口工程师, 这并不是一个很难解决的问题, 咱们能够提供一个获取聊天记录的接口, 通过该接口咱们能够获取到

对方曾经发送到音讯. 那么问题又来了, 如何保障可能即时的获取到聊天记录呢? 想必这也不是问题, 前端能够通过定时器

的形式, 将间隔时间缩短到 100 毫秒, 这样子就曾经实现了近实时的获取音讯

setInterval(function () {// do something},100)

当咱们写完以上代码上线后, 却通过监控能够发现, 上线后的服务器指标显著比之前有所晋升

服务器是非常宝贵的资源, 那么为什么会产生这种状况呢? 回过头一想, 会产生这种状况也无可非议, 每 100 毫秒就申请一

次后端, 如果有聊天记录产生, 那么这种申请就认为是有意义的, 但如果长时间未聊天, 每次申请返回都是空记录, 那么这种

频繁申请就是无意义的. 频繁申请会使服务器压力增大, 并且节约带宽流量.

那么有没有别的形式能够解决?

咱们兴许能够应用 SSE 形式, SSE 并不是一个什么比拟新鲜的概念, 它呈现的工夫也很早

SSE 全称 Server-Sent Events，指的是网页主动获取来自服务器的更新，也就是自动化获取服务端推送至网页的数据，这是一个 H5 的属性，除了 IE，其余规范浏览器根本都兼容

这种形式不须要客户端定时去获取，而是服务端向客户端申明要发送流信息，而后连续不断地发送过去

只管这种形式不须要定时轮询, 然而它只能 单工通信，建设连贯后，只能由服务端发往客户端，且须要占用一个连贯，如果须要客户端向服务端通信，那么须要额定再关上一个连贯!

如果连接数过多会导致什么问题?

TCP 的连接数是无限的, SYN DDOS 洪水攻打, 就是利用 TCP 半连贯的问题来攻打服务器

因而这也不是一种优雅的实现形式

其实到这里, 咱们解决的思路曾经很明确了, 就是在不节约带宽的状况下如何让服务端将最新的音讯以最快的速度发送给客

户端. 然而显著 HTTP 协定不实用, 它是会在服务端收到申请后才会做出回应. 因而为了解决这个问题, 那么就须要就须要讲

到一种通信协议, 那就是 WebSocket

WebSocket 是一种 计算机通信协议，通过单个 TCP 连贯提供全双工通信信道。

建设一个 WebSocket 连贯，客户端会发送一个 WebSocket 握手申请，服务器为此返回一个 WebSocket 握手响应，如下

图所示。

相比于传统 HTTP 的每次 申请 - 应答 都要客户端与服务端建设连贯的模式, websocket 是一种 长连贯 的模式, 一旦建

立起 websocekt 连贯, 除非 client 或者 server 中有一端被动断开连接, 否则每次数据传输之前都不须要 HTTP 那样申请数

据

客户端申请

Upgrade: websocket
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Upgrade 是为了表明这是一个 websocekt 类型申请, 意在通知 server 须要将通信协议切换到 websocekt
Sec-WebSocket-Key是 client 发送的一个 base64 编码的密文，要求服务器用 Sec-WebSocket-Accept 头部中的密钥散列作为响应。这是为了避免缓存代理从新发送以前的 WebSocket 对话，并且不提供任何身份验证、隐衷或完整性。

服务端响应

Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

握手从 HTTP 申请 / 响应开始，容许服务器在同一端口解决 HTTP 连贯和 WebSocket 连贯。一旦连贯建设起来，通信就

切换到不合乎 HTTP 协定的双向二进制协定。

到这里其实计划曾经进去了, 然而咱们这篇文章的题目的确 Socket.IO, 既然都有了 Websocket, 为什么咱们讲的是 Socket.IO ?

在大家往下看之前先分明这么一个观点:

Socket.IO 不是代替 , 而是降级

Socket.IO 是一个库 , 说到库其实咱们都不生疏, 库是对已有的性能进行封装, 没错, 它是构建在 WebSocket 协定之上, 并提供额定的保障, 既然 它是构建在 websocekt 之上, 阐明它同样具备客户机与服务器之间提早通信的性能.

Socket.IO 可用于实现以下几种通信形式：

HTML 5 中的 WebSocket 通信
可在 Flash 中应用的 WebSocket 通信
XHR 轮询
JSONP 轮询
Forever Iframe

Socket.IO 确保在实现这些通信形式时，客户端与服务器端能够应用雷同的 API。并具备以下个性:

HTTP 长轮询回退

如果不能建设 WebSocket 连贯，连贯将退回到 HTTP 长轮询。

主动从新连贯

在某些特定条件下，服务器和客户端之间的 WebSocket 连贯可能会被中断，单方都不晓得链接的断开状态。而 Socket.IO 蕴含一个 heartbeat 机制的起因，该机制定期检查连贯的状态. 当客户端最终断开连接时，它会主动从新连贯，并且会呈现指数级的回退提早，免得压垮服务器

数据包缓冲

当客户端断开连接时，数据包将主动缓冲，并在从新连贯时发送

既然 Socket.IO 如此的美好, 那么它该如何应用呢? 那么接下来就让咱们创立一个本人的 聊天室 吧 !

本案例采纳 NodeJS 环境搭建, 极其简略, 有条件的能够上手一试

筹备前提:

确保装置了 Node.js 环境
筹备一个空文件夹

筹备步骤很简略, 接下来咱们就开始创立咱们本人的聊天室

1. 创立 package.json 文件

咱们在空目录下创立 package.json 文件, 内容如下:

{  
    "name": "c-chat",  
    "version": "0.0.1",  
    "description": "my first chat app",  
    "dependencies": {}}

在当前目录执行命令 npm install express 装置 web 利用开发框架

2. 创立 index.js & index.html

在空目录下创立 index.js 文件, 内容如下:

const app = require('express')();
const http = require('http').Server(app);

app.get('/', (req, res) => {res.sendFile(__dirname + '/index.html');
});

http.listen(port, () => {console.log(`${port} 端口监听胜利 `);
});

接着创立 index.html 文件, 内容如下

<!DOCTYPE html>
<html>
 <head>
   <title>my chat</title>
   <style>
     body {margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

     #form {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
     #input {border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem;}
     #input:focus {outline: none;}
     #form > button {background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff;}

     #messages {list-style-type: none; margin: 0; padding: 0;}
     #messages > li {padding: 0.5rem 1rem;}
     #messages > li:nth-child(odd) {background: #efefef;}
   </style>
 </head>
 <body>
   <ul id="messages"></ul>
   <form id="form" action="">
     <input id="input" /><button>Send</button>
   </form>
 </body>
</html>

为了测试 http 服务与咱们的页面是否无效, 咱们能够利用 node index.js 启动我的项目来验证

到这里, 咱们就曾经可能胜利拜访到咱们的页面, 接下来就开始通过 socket.io 来实现咱们的聊天性能

3. 装置 socket.io 库

npm install socket.io 首先就须要执行以上命令来装置 socket.io 库

当初离指标曾经实现一大半了

咱们只须要批改局部内容便能够看到咱们想要的成果

服务端

const {Server} = require("socket.io");
const io = new Server(server);

以上代码是为了引入 socket.io 库, 并创立 websocket 服务, 而后便能够建设 socket 监听

io.on('connection', (socket) => {console.log('连贯建设胜利');});

在一个 Socket.IO 服务器创立之后，当客户端与服务器端建设连贯时，触发 Socket.IO 服务器的 connection 事件，能够通过监听该事件并指定事件回调函数的办法指定当客户端与服务器端建设连贯时所需执行的解决

客户端

在 index.html 页面, 咱们增加以下代码来引入 socket.io.js, 并创立 socket 对象

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

到这里为止就是加载 socket.io-client 所需的全副操作，该客户端公开了一个 io 全局 (以及端点 GET/ socket.io/socket.io.js)，而后进行连贯。咱们能够重启下服务, 关上浏览器, 而后查看控制台后果

能够看到 连贯曾经胜利建设 了. 接下来就是最重要的环节了, 单方须要进行音讯发送了, 在 IO 中任何能够被编码为 JSON 的对象都能够发送，并且还反对二进制数据

客户端

index.html 中须要批改的代码如下:

<script>
  var socket = io();

  var messages = document.getElementById('messages');
  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {e.preventDefault();
    if (input.value) {socket.emit('chat message', input.value);
      input.value = '';
    }
  });

  socket.on('chat message', function(msg) {var item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>

能够通过 emit 办法往服务端发送音讯, 其中 chat message 为发送的指标地址

在 emit 办法中，应用三个参数

socket.emit(event, data, callback)

event 参数值为一个用于指定事件名的字符串, 也就是指标主题
data 参数值代表该事件中携带的数据，该数据将被对方接管，数据能够为一个字符串，也能够为一个对象
callback 参数值为一个参数，用于指定一个当对方确认接管到数据时调用的回调函数

服务端

index.js 文件中须要批改的代码如下:

io.on('connection', (socket) => {socket.on('chat message', (msg) => {console.log('message:' + msg);
  });
});

通过 socket.on() 的形式监听指标地址, 这有些相似于公布 / 订阅模式, 单方订阅同一个地址, 而后往这个通道中传递音讯
在服务端咱们同样能够应用 emit 办法往客户端发送音讯, 咱们能够利用 socket.emit() 进行发送

附: 残缺代码

index.html

index.js

到这里就彻底完结了, 来吧, 伙计们, 当初重新启动我的项目, 而后关上两个浏览器拜访 localhost:3000 地址, 来尝试和本人对话吧 !

下面咱们曾经简略的实现了一个聊天室的性能, 次要利用到以下 api

socket.on() 监听事件
socket.emit() 音讯发送

这两个是最根底的用法, 上面咱们说一个扩大应用, 那就是 命名空间

如果开发者想在一个特定的应用程序中齐全管制音讯与事件的发送，只须要应用一个默认的 "/" 命名空间就足够了。然而如果开发者须要将应用程序作为第三方服务提供给其余应用程序，则须要为一个用于与客户端连贯的 socket 端口定义一个独立的命名空间。

在 Socket.IO 中，应用 Socket.IO 服务器对象的 of 办法定义命名空间，代码如下所示（代码中的 io 代表一个 Socket.IO 服务器对象）。

io.of(namespace)

上面咱们看下如何应用:

服务端

io.of("/chat").on("connection", (socket) => {
  // 订阅对应的主题
  socket.on("chat message", (msg) => {console.log("message:" + msg);
    socket.emit("chat message", msg);
  });
});

客户端

var socket = io('http://localhost:3000/chats');

咱们以上例子中定义了 chat 这个命名空间用于辨别不同 socket 连贯, 小伙伴们能够施展设想这个能够利用到什么场景中 !

SOCKET 是用来让不同电脑之间，不同过程之间相互通信的一套接口。Socket, 直译过去能够是“插座”，而在中文中往往会叫“套接字”。单方要建设连贯, 首先就会申请一个 套接字 来传输音讯

不要空谈，不要贪懒，和小菜一起做个 吹着牛 X 做架构 的程序猿吧~ 点个关注做个伴，让小菜不再孤独。咱们下文见！

明天的你多致力一点，今天的你就能少说一句求人的话！

我是小菜，一个和你一起变强的男人。 💋

微信公众号已开启，小菜良记，没关注的同学们记得关注哦！

Socket.IO

聊天室

1. 创立 package.json 文件

2. 创立 index.js & index.html

3. 装置 socket.io 库

服务端

客户端

客户端

服务端

附: 残缺代码

命名空间

总结