在这一篇文章中,我将会先对 websocket 做一个简单的介绍;然后使用 node + websocket 做一个极其简陋的聊天室;最后在将这个简陋的聊天室通过 websocket 框架 —— 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
WebRTC 估计很多人都不会陌生,websocket 一般适用于文本的实时通信,而音视频的通信一般使用的是 WebRTC 技术
2、直接上手
① 使用浏览器 + websocket + node 做一个简单的聊天室
其实 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 server.js
Ⅱ. 客户端
-
在文件夹中创建一个 index.html 文件,先编写一个简陋的 HTML 页面
<!-- 需要一进来如浏览器就要建立链接 --> <!-- 点击按钮发送消息给服务器 --</