Socket.IO chat

--- theme: channing-cyan --- 本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。 ## WebSocket基础概念 WebSocket 是一种在浏览器和服务器之间建立**持久连接**来交换数据的方法。直观来说，它基于tcp，先通过HTTP/HTTPS协议发起一条特殊的http请求进行握手后创建一个用于交换数据的TCP连接协议。是不同于http的一种协议。 ## 连接过程当 `new WebSocket(url)` 被创建后，它将立即开始连接。在连接期间，浏览器（使用 header）问服务器：“你支持 WebSocket 吗？”如果服务器回复说“我支持”，那么通信就以 WebSocket 协议继续进行，注意该协议不是 HTTP。 ## 用三个端口来演示WebSocket的运行过程 WebSocket的主要特点是**长连接**和**双向通信**，其中双向通行是实现即时通信，通知等功能的关键。这里我们使用`Koa`和`socket.io`来快速实现两个端口模拟的即时通讯效果，从而直观的感受下WebSocket的作用。（注：这里的socket.io是一个实现WebSocket的包，以下的实例，是经过官网的实例改进而成的，有兴趣的可以去官网了解一下 [Socket.IO](https://socket.io/) ） ### 搭建两个端口： ``` const Koa = require("koa"); const { createServer } = require("http"); const { Server } = require("socket.io"); const app = new Koa(); const httpServer = createServer(app.callback()); //注意多个端口要解决一下跨域问题 const io = new Server(httpServer, { cors:{ origin:'http://localhost:3001' } }); io.on('connection', (socket) => { //监听WebSocket的连接 console.log('一个用户开始连接',socket.id) socket.on('chat message', (msg) => { //监听chat message io.emit('chat message from 3000', msg); //发送chat message from 3000及其包含的数据 }); socket.on('disconnect', () => { console.log('一个用户断开连接'); }); }); httpServer.listen(3000,()=>{ console.log('start 3000') }); ``` ``` //index2.js 3001端口，用来模拟用户发送和接收信息 const Koa = require("koa"); const { createServer } = require("http"); const router = require('koa-router')(); const static = require('koa-static') const app = new Koa(); const httpServer = createServer(app.callback()); app.use(router.routes()); router.get('/',static(__dirname+'/public')) //静态网页显示 httpServer.listen(3001,()=>{ console.log('start 3001') }); ``` ### 服务器引用的静态页面 ``` Socket.IO chat

``` 之后我们启动两个端口，然后分别在浏览器上打开**两个3001端口**，在3001端口，我们可以看到： ![屏幕截图 2021-10-20 185729.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f95e9f81ba943e1823bff8f6f4e0577~tplv-k3u1fbpfcp-watermark.image?) 在服务器端，我们可以看到3000端口打印出了如下内容： ![屏幕截图 2021-10-20 185901.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fa765de5f554230b33c8b9a70172332~tplv-k3u1fbpfcp-watermark.image?) 可以看到，两个3001端口，分别建立两个WebSocket连接，同时生成了两个`socket.id`来区分不同的用户。我们在第一个页面发送消息，可以看到，这则消息通过服务器的广播，分别发送给了两个已经建立连接的页面发送了消息： ![演示.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/948d5fe49b884f39b5077fc993f940c2~tplv-k3u1fbpfcp-watermark.image?) 通过样例，我们可以很容易的看到，WebSocket实现了双端通信的效果。 ## WebSocket知识点（补） ### WebSocket常用状态码 **1000** CLOSE_NORMAL 正常关闭; 无论为何目的而创建, 该链接都已成功完成任务. **1001** CLOSE_GOING_AWAY 终端离开, 因为服务端错误或浏览器跳转到其他页面或关闭 **1009** CLOSE_TOO_LARGE 由于收到过大的数据帧而断开连接. **1011** Internal Error 客户端由于遇到没有预料的情况阻止其完成请求, 因此服务端断开连接. ### 连接状态 - **`0`** —— “CONNECTING”：连接还未建立， - **`1`** —— “OPEN”：通信中， - **`2`** —— “CLOSING”：连接关闭中， - **`3`** —— “CLOSED”：连接已关闭。 ### 其他 - 浏览器对WebSocket支持很好 - WebSocket可以发送/接收字符串和二进制数据 - 注意websocket需要长连接的支持。