websocket + node 手把手实现简陋聊天室

websocket + node 手把手实现简陋聊天室

在这一篇文章中，我将会先对 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

WebRTC 估计很多人都不会陌生，websocket 一般适用于文本的实时通信，而音视频的通信一般使用的是 WebRTC 技术

2、直接上手 ① 使用浏览器 + websocket + node 做一个简单的聊天室

其实 websocket 的技术还是有不少理论性的知识，因为比较偏网络方面，会比较枯燥，有兴趣的可以去搜一下相关的知识。现在我将要直接带各位实战了。

Ⅰ. 服务端

1. 第一步：创建一个空文件夹，然后使用 npm init -y 初始化整个文件夹

2. 安装 websocket：npm install websocket，websocket 的 npm 包的网址：https://www.npmjs.com/package/websocket

3. 在目录中创建一个文件，命名为 server.js
   

4. 首先需要引入 websocket，很重要的一点：需要再引入 http 模块，因为 websocket 是基于 http 协议的

   const  websocket = require('websocket').server
   
   const http = require('http')
   

5. 然后启动 http，开启服务器，进行监听

   const httpServer = http.createServer().listen(8080, ()=>{
   	console.log('nihao: ','http://localhost:8080');
   })
   

6. 创建 websocket 服务，这里面有两个必填的参数

   const websocketServer = new websocket({
   	httpServer: httpServer,
   	autoAcceptConnections: false
   })
   

7. 创建通信线池，如果不适用数据库的话，需要用数组来做一个虚拟的线池，因为 websocket 是一个实时通信的，服务器与客户端之间的通信是有来有回的，需要将这些通信的数据进行存储。一般使用 redis 来做线池，然后上限存储的数据数量一般是 1000 条

   const conArr = []
   

8. 使用 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)
      		}
   	})
   })
   

9. 最后启动服务器就可以：node ser

Ⅱ. 客户端

1. 在文件夹中创建一个 index.html 文件，先编写一个简陋的 HTML 页面

   
   
   输入姓名：
   
   
   输入消息：
   
    点击发送消息 
   欢迎分享，转载请注明来源：内存溢出
   原文地址:https://54852.com/zaji/5618841.html