时间：2023-07-06 12:36:01 | 来源：网站运营
时间：2023-07-06 12:36:01 来源：网站运营
小白Websocket入门，10分钟搭建一个多人聊天室～：从不认识Websocket到接手H5聊天室项目，接着就是一年多的聊天室功能更新和迭代，总的来说，入门很简单，要深入还是要花一些时间去学习实践才可以。网上已经有不少大佬发表过关于Websocket实现聊天室的文章，这里我自己总结了Websocket的基础知识，实现了一个简单的聊天室入门的demo，作为记录和复习，也分享给需要入门的人。
在线咨询
ws（如果加密，则为wss），服务器网址就是 URL」。// 客户端发送的请求头GET wss://www.example.cn/webSocket HTTP/1.1 // 使用的https协议, 对应的wss请求Host: www.example.cnConnection: Upgrade // 带upgrade头的http1.1消息必须含有connection头，表示任何接受此消息的人都在在转发此消息之前处理掉connection中指定的域（即不转发upgrade域）Upgrade: websocket // 定义转换协议的header域，如果服务器支持，客户端希望使用已经建立好的http（tcp）连接Sec-WebSocket-Version: 13 // 客户端支持的WebSocket协议的版本列表Origin: http://example.cn // Origin为安全使用，防止跨站攻击，浏览器一般会使用这个来标识原始域。Sec-WebSocket-Key: afmbhhBRQuwCLmnWDRWHxw== // 首标 客户端随机生成，服务器会使用此字段组装成另一个key值放在握手返回信息里。用于客户端到服务器websocket的初始握手，避免夸协议攻击。Sec-WebSocket-Protocol: chat, superchat // 首标 告诉客户端应用程序可使用的协议Sec-WebSocket-Extensions: permessage-deflate（协商使用传输数据压缩）; client_max_window_bits（擦采用LZ77压缩算法时，滑动窗口相关SIZE大小）// 首标// 服务器发出的响应头HTTP/1.1 101Server: nginx/1.12.2Date: Sat, 11 Aug 2018 13:21:27 GMTConnection: upgradeUpgrade: websocketSec-WebSocket-Accept: sLMyWetYOwus23qJyUD/fa1hztc= // 确认服务器是否理解websocket协议Sec-WebSocket-Protocol: chatSec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15/** Sec-WebSocket-Accept的生成步骤：（1）将Sec-WebSocket-Key与协议中已定义的GUID进行拼接 （2）将（1）中生成的字符串进行SHA1编码 （3）将2中生成的字符串进行Base64编码Sec-WebSocket-Accept用来确定：（1）服务端是否理解websocket协议，如果不理解，就不会返回正确的Sec-WebSocket-Accept （2）返回值是本次请求的，而不是之前的缓存*/ 「半双工通信」：单向流动， 服务器不主动推送数据给客户端。 「全双工通信」：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
/** * URL: 连接的目标 * protocols（选填）：string | string[] 一个或一组协议名称*/const ws = new WebSocket(URL, protocols)为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，「并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。」| 常量特性 | 取值 | 状态 |
|---|---|---|
| Websocket.CONNECTING | 0 | 连接进行中，但还未建立成功 |
| Websocket.OPEN | 1 | 连接已经建立，可以正常发送消息 |
| Websocket.CLOSING | 2 | 连接正在进行关闭握手 |
| Websocket.CLOSED | 3 | 表示连接已经关闭或者连接不能打开。 |
npm i wsconnection连接成功后，在connection内部编写连接后的逻辑。监听onmessage事件获取收到的消息，监听onclose事件处理连接断开的逻辑，使用send方法向客户端发送消息。const Websocket = require('ws')const wss = new Websocket.Server({ port: 3000 })wss.on('connection', function (ws) { // 有客户端连接进来 ws.on('message', function (message) { console.log('server receive message: ', message.toString()) }) ws.send('msg from server!') ws.on('close', function (message) { console.log('连接断开', message) })})this.ws = new WebSocket('ws://localhost:3000')console.log('before open', this.ws.readyState) // 0this.ws.onopen = () => { // 监听到连接成功 console.log('onopen', this.ws.readyState) // 1 this.roomOpen = true this.ws.send(JSON.stringify({ userId: this.userName, userName: this.nickname, roomId: item.roomId, roomName: item.name, event: 'login', // 向服务端发送一条登陆消息，并携带对应房间信息和用户信息 }))}// 收到消息的回调this.ws.onmessage = (message) => { console.log('The client receives the message', message)}// 收到连接断开通知this.ws.onclose = () => { // 监听websocket关闭的回调 console.log('onclose', this.ws.readyState)}// 手动断开websocket连接close () { this.ws && this.ws.close()}this.ws.onopen = () => { this.roomOpen = true this.ws.send(JSON.stringify({ userId: this.userName, userName: this.nickname, roomId: item.roomId, roomName: item.name, event: 'login', })) }, 25000)}this.ws.onmessage = (message) => { const data = JSON.parse(message.data) this.onlineNum = data.num if (data.event === 'login') { // 有其他用户进入房间消息 this.msgList.push({ content: `欢迎${data.userName}进入${data.roomName}房间～`, }) } else if (data.event === 'logout') { // 有其他用户离开房间消息 console.log('logout', data) this.msgList.push({ content: `${data.userName}离开房间`, }) } else { // 普通消息 const self = this.userId === data.userId if (self) return this.msgList.push({ name: data.userName, self: false, content: data.content, }) } }「server.js」ws.on('message', function (message) { console.log('server receive message: ', message.toString()) const data = JSON.parse(message.toString()) if (typeof ws.roomId === 'undefined' && data.roomId) { ws.roomId = data.roomId if (typeof group[ws.roomId] === 'undefined') { group[ws.roomId] = 1 } else { group[ws.roomId]++ } } data.num = group[ws.roomId] wss.clients.forEach(client => { if (client.readyState === Websocket.OPEN && client.roomId === ws.roomId) { client.send(JSON.stringify(data)) } })}) ws.on('close', function (message) { // 监听到聊天室关闭后，将在线人数减1，并将退出房间的消息推送给其他客户端，更新页面的在线人数 group[ws.roomId]-- wss.clients.forEach(function each (client) { if (client !== ws && client.readyState === Websocket.OPEN && client.roomId === ws.roomId) { client.send(JSON.stringify({ ...ws.enterInfo, event: 'logout', num: group[ws.roomId], })) } })})ping 到服务端，服务端收到后响应一个 pong 表明双方都活得好好的。this.ws.onopen = () => { if (this.heartbeatTimer !== -1) { clearInterval(this.heartbeatTimer) this.heartbeatTimer = -1 } this.heartbeatTimer = setInterval(() => { if (this.heartBeatTimeoutJob !== -1) { clearTimeout(this.heartBeatTimeoutJob) this.heartBeatTimeoutJob = -1 } this.heartBeatTimeoutJob = setTimeout(() => { console.log('心跳超时') }, 10000) this.ws.send(JSON.stringify({ event: 'heartBeat', content: 'ping', })) console.log('send ping') }, 25000)}this.ws.onmessage = (message) => { console.log('onmessage', message) const data = JSON.parse(message.data) console.log('message.data: ', data) if (data.event === 'heartBeat' && data.content === 'pong') { console.log('receive server pong') if (this.heartBeatTimeoutJob !== -1) { clearTimeout(this.heartBeatTimeoutJob) this.heartBeatTimeoutJob = -1 } return }} this.ws.onclose = () => { console.log('onclose', this.ws.readyState) clearInterval(this.heartbeatTimer) this.heartbeatTimer = -1 clearTimeout(this.heartBeatTimeoutJob) this.heartBeatTimeoutJob = -1 }在home.vue中，我们在监听到onopen后，创建了一个定时器heartbeatTimer，来隔段时间向服务器发送还活着的ping消息。同时在heartbeatTimer内部创建一个定时器heartBeatTimeoutJob来检查服务器是否有回复pong消息，当没有在heartBeatTimeoutJob设定的时间内收到服务器的pong消息，就视为心跳超时，在这里监听到心跳超时后，可以进行断连并重连操作。ws.on('message', function (message) { // console.log('wss', wss) console.log('server receive message: ', message.toString()) const data = JSON.parse(message.toString()) if (data.event === 'login') { ws.enterInfo = data } if (data.event === 'heartBeat' && data.content === 'ping') { console.log('receive ping message') ws.isAlive = true ws.send(JSON.stringify({ event: 'heartBeat', content: 'pong', })) return } if (typeof ws.roomId === 'undefined' && data.roomId) { ws.roomId = data.roomId if (typeof group[ws.roomId] === 'undefined') { group[ws.roomId] = 1 } else { group[ws.roomId]++ } } console.log('groun', group) data.num = group[ws.roomId] wss.clients.forEach(client => { if (client.readyState === Websocket.OPEN && client.roomId === ws.roomId) { client.send(JSON.stringify(data)) } }) })server.js中服务端应该也要有一个定时器校验心跳是否超时，如果超时则断开连接，并重新计算在线人数等。关键词：入门
