文章目录在这一篇文章中，我将会先对 websocket 做一个简单的介绍；然后使用 node + websocket 做一个极其简陋的聊天室；最后在将这个简陋的聊天室通过 websocket 框架 —— socket.io 进行制作。
- 1、认识 websocket
- ① 什么是 websocket
- ② 特点
- ③ 补充技术
- 2、直接上手
- ① 使用浏览器 + websocket + node 做一个简单的聊天室
- Ⅰ. 服务端
- Ⅱ. 客户端
- Ⅲ. 效果查看
- Ⅳ. 完整代码
- ② 使用 socket.io 框架制作一个聊天框
1、认识 websocket ① 什么是 websocket
HTML5 开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于 TCP 传输协议，并复用 HTTP 的握手通道。
Websocket 是一种自然的全双工、双向、单套接字连接。解决了 HTTP 协议中不适合于实时通信的不足。2008 年被提出，2011 年成为国际标准。
Websocket 协议能够通过 Web 进行客户端和服务器之间的全双工通信，并支持二进制数据和文本字符串的传输。 这个协议由开始的握手和之后的基本消息框架组成，是建立在 TCP 协议上的。 相比于 HTTP 协议，Websocket 链接一旦建立，即可进行双向的实时通信；
② 特点下面一幅图是 HTTP 建立连接与 websocket 建立连接的流程图
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
Server-sent Events（SSE）：
https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
https://www.cnblogs.com/goloving/p/9196066.html
SPDY （读作“SPeeDY”）： 已不再维护，由 HTTP/2 取代
https://baike.baidu.com/item/SPDY/3399551#7
WebRTC
https://baike.baidu.com/item/WebRTC/5522744
2、直接上手 ① 使用浏览器 + websocket + node 做一个简单的聊天室WebRTC 估计很多人都不会陌生，websocket 一般适用于文本的实时通信，而音视频的通信一般使用的是 WebRTC 技术
Ⅰ. 服务端其实 websocket 的技术还是有不少理论性的知识，因为比较偏网络方面，会比较枯燥，有兴趣的可以去搜一下相关的知识。现在我将要直接带各位实战了。
-
第一步：创建一个空文件夹，然后使用 npm init -y 初始化整个文件夹
-
安装 websocket：npm install websocket，websocket 的 npm 包的网址：https://www.npmjs.com/package/websocket
-
在目录中创建一个文件，命名为 server.js
-
首先需要引入 websocket，很重要的一点：需要再引入 http 模块，因为 websocket 是基于 http 协议的
const websocket = require('websocket').server const http = require('http') -
然后启动 http，开启服务器，进行监听
const httpServer = http.createServer().listen(8080, ()=>{ console.log('nihao: ','http://localhost:8080'); }) -
创建 websocket 服务，这里面有两个必填的参数
const websocketServer = new websocket({ httpServer: httpServer, autoAcceptConnections: false }) -
创建通信线池，如果不适用数据库的话，需要用数组来做一个虚拟的线池，因为 websocket 是一个实时通信的，服务器与客户端之间的通信是有来有回的，需要将这些通信的数据进行存储。一般使用 redis 来做线池，然后上限存储的数据数量一般是 1000 条
const conArr = []
-
使用 websocket 来接受请求和发送消息，这里用到的是 websocket 的 npm 包中的 .on('requset', function(){}) 方法和 .on('message', function() {} 方法。这些方法的使用都可以从 websocket 的 npm 文档中查看，或者是从 github 上面查看
websocketServer.on('request', function(request) { // 这就是一次客户端发送的消息 // websocket 需要将这个链接保存起来 // 只要客户端和服务器没有断开，这个链接必须在 // 客户端与服务端的通信都是从这个链接上通信 const connection = request.accept() // 每次接收一个链接，将它存放在数组里面 conArr.push(connection) // 监听客户端发送的消息 connection.on('message', function(message) { console.log(message); // 发送消息给客户端（广播到各个客户端） // 后面加上 utf8Data 编码 // 要将所有的链接全部发出去，才可以让每个客户端接收到其他传来的数据 for(let i = 0; i < conArr.length; i++) { conArr[i].send(message.utf8Data) } }) }) -
最后启动服务器就可以：node ser
-
在文件夹中创建一个 index.html 文件，先编写一个简陋的 HTML 页面
输入姓名：
输入消息： -
先通过 js 获取到页面中的节点，都时候通过这些节点进行一系列的操作
// 用户名 const uName = document.getElementById('uName') // 文本框内容 const context = document.getElementById('context') // 点击按钮 const btn = document.getElementById('btn') // 要显示聊天室的区域 const charRoom = document.getElementById('charRoom') -
**注意，因为在浏览器中自带 websocket，所以直接通过 new 实例化 websocket 对象就行，并不需要下载或者引入什么东西。**这里会用到浏览器中 websocket 自己的方法：websocket.onopen，websocket 的各种方法都可以从 MDN 文档中查看到：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
// 实例化 websocket // 必须加 'ws://localhost:8080' ws 协议，后面是开启的服务端接口 const websocket = new WebSocket('ws://localhost:8080') // 打开事件 websocket.onopen = function() { // 获取当前链接的状态 // 1 是建立了链接 console.log(websocket.readyState); } -
创建一个按钮点击事件，通过这个事件通过 websocket 向服务器发送数据，向服务器发送数据需要通过 websocket 的 websocket.onmessage 方法进行消息的传送，这个方法有一个参数，参数就是自己要发送的 data 数据。但是注意，因为自己从页面中获取到的数据都不是 JSON 对象格式，在发送数据之前，需要将数据转换为 JSON 对象格式。
// 点击发送消息的事件 btn.onclick = function() { // 将用户名和要发送的内容放在一个对象中，一起传送给后端 const values = { uName: uName.value, context: context.value } // 清空文本框的内容 uName.value = '' context.value = '' // 通过 websockte 发送消息 websocket.send(JSON.stringify(values)) } -
最后是让浏览器实时监听服务器传递过来的消息，需要通过 websocket 的 websocket.onmessage 方法获取服务器发送的消息。这里我通过模板字符串的形式，对文本内容进行拼接处理。
// 接收服务器返回的消息 websocket.onmessage = function(data) { // 服务器返回过来的聊天信息 const chatS = JSON.parse(data.data) // 添加到页面上 charRoom.innerHTML += ` ${chatS.uName}： ${chatS.context}
` }
这个时候打开浏览器，就可以实现客户端之间的实时通信了。因为要查看客户端之间的实时通信，那么可以打开多个浏览器来查看效果：
好了使用原生的 websocket + node 实现一个简单的聊天室就结束了。
server.js 服务器的完整代码
const websocket = require('websocket').server
const http = require('http')
const httpServer = http.createServer().listen(8080, ()=>{
console.log('nihao: ','http://localhost:8080');
})
// 创建 websocket 服务器
const websocketServer = new websocket({
httpServer: httpServer,
autoAcceptConnections: false
})
// 链接池，一般真实场景会用缓存做链接池 redis 一般一个链接池的上限是 1000
// 存储链接
// 但是有一个最大上限
const conArr = []
websocketServer.on('request', function(request) {
// 这就是一次客户端发送的消息
// websocket 需要将这个链接保存起来
// 只要客户端和服务器没有断开，这个链接必须在
// 客户端与服务端的通信都是从这个链接上通信
const connection = request.accept()
// 每次接收一个链接，将它存放在数组里面
conArr.push(connection)
// 监听客户端发送的消息
connection.on('message', function(message) {
console.log(message);
// 发送消息给客户端（广播到各个客户端）
// 后面加上 utf8Data 编码
// 要将所有的链接全部发出去，才可以让每个客户端接收到其他传来的数据
for(let i = 0; i < conArr.length; i++) {
conArr[i].send(message.utf8Data)
}
})
// 客户端断开连接，服务器会触发
// connection.on('close')
})
index.html 客户端的完整代码
② 使用 socket.io 框架制作一个聊天框document 输入姓名：
输入消息：
socket.io 对 websocket 做了很完整的封装，核心代码只需要几步就可以完成了，具体的步骤我不会再向上面那么详细的介绍，这里我直接给各位完整的代码，可以结合我的注释来食用。当然最好的学习途径肯定是官网文档了：https://socket.io/docs/v4/
server.js 服务端的完整代码
// socket.io 框架
// 引入 http 模块的 createServer 方法
const { createServer } = require('http')
// 引入 socket.io 的 Server 模块
const { Server } = require('socket.io')
// 实例化 httpServer
const httpServer = createServer();
// 初始化 socket.io
const io = new Server(httpServer, {
cors: {
origin: '*',
methods: ['GET', 'POST']
}
})
// 使用 socket.io 来建立连接
io.on('connection', socket => {
socket.on('sendMsg', data => {
io.emit('pushMsg', data)
console.log(data);
})
})
// 创建服务器，进行监听
httpServer.listen(8080, function() {
console.log('http://localhost:8080');
})
客户端的完整代码
注意客户端这里，因为是要使用 scoket.io 框架，必须先要引入。官网上有多种引入方式，通过 CDN 引入或者是直接下载到本地进行引入。
document 输入姓名：
输入消息：
也附上一个效果图吧：
