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

哲理山路十八弯
5,599 阅读7分钟

在这一篇文章中，我将会先对 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）： www.ruanyifeng.com/blog/2017/0… www.cnblogs.com/goloving/p/…

SPDY （读作“SPeeDY”）： 已不再维护，由 HTTP/2 取代 baike.baidu.com/item/SPDY/3…

WebRTC baike.baidu.com/item/WebRTC…

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

2、直接上手

① 使用浏览器 + websocket + node 做一个简单的聊天室

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

Ⅰ. 服务端

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

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

  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 server.js在这里插入图片描述

Ⅱ. 客户端

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

    <!-- 需要一进来如浏览器就要建立链接 -->
<!-- 点击按钮发送消息给服务器 -->
输入姓名：<input type="text" id="uName">
<br>
输入消息：<input type="text" id="context">

<button id="btn"> 点击发送消息 </button>

<div id="charRoom"></div>

  2. 先通过 js 获取到页面中的节点，都时候通过这些节点进行一系列的操作

    // 用户名
const uName = document.getElementById('uName')
// 文本框内容
const context = document.getElementById('context')
// 点击按钮
const btn = document.getElementById('btn')
// 要显示聊天室的区域
const charRoom = document.getElementById('charRoom')

  3. 注意，因为在浏览器中自带 websocket，所以直接通过 new 实例化 websocket 对象就行，并不需要下载或者引入什么东西。 这里会用到浏览器中 websocket 自己的方法：websocket.onopen，websocket 的各种方法都可以从 MDN 文档中查看到：developer.mozilla.org/zh-CN/docs/…

    // 实例化 websocket
// 必须加 'ws://localhost:8080' ws 协议，后面是开启的服务端接口
const websocket = new WebSocket('ws://localhost:8080')
// 打开事件
websocket.onopen = function() {
  // 获取当前链接的状态
  // 1 是建立了链接
  console.log(websocket.readyState);
}

  4. 创建一个按钮点击事件，通过这个事件通过 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))
}

  5. 最后是让浏览器实时监听服务器传递过来的消息，需要通过 websocket 的 websocket.onmessage 方法获取服务器发送的消息。这里我通过模板字符串的形式，对文本内容进行拼接处理。

    // 接收服务器返回的消息
websocket.onmessage = function(data) {
  // 服务器返回过来的聊天信息
  const chatS = JSON.parse(data.data)

  // 添加到页面上
  charRoom.innerHTML += `
    <strong>${chatS.uName}：</strong>
    <span>${chatS.context}</span>
    <br />
  `
}

Ⅲ. 效果查看

       这个时候打开浏览器，就可以实现客户端之间的实时通信了。因为要查看客户端之间的实时通信，那么可以打开多个浏览器来查看效果：请添加图片描述        好了使用原生的 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 客户端的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 需要一进入浏览器就要建立链接 -->
  <!-- 点击按钮发送消息给服务器 -->
  输入姓名：<input type="text" id="uName">
  <br>
  输入消息：<input type="text" id="context">

  <button id="btn"> 点击发送消息 </button>

  <div id="charRoom"></div>

  <script>
    // 用户名
    const uName = document.getElementById('uName')
    // 文本框内容
    const context = document.getElementById('context')
    // 点击按钮
    const btn = document.getElementById('btn')
    // 要显示聊天室的区域
    const charRoom = document.getElementById('charRoom')
    
    // 实例化 websocket
    // 必须加 'ws://localhost:8080' ws 协议，后面是开启的服务端接口
    const websocket = new WebSocket('ws://localhost:8080')
    // 打开事件
    websocket.onopen = function() {
      // 获取当前链接的状态
      // 1 是建立了链接
      console.log(websocket.readyState);
    }

    // 点击发送消息的事件
    btn.onclick = function() {
      // 将用户名和要发送的内容放在一个对象中，一起传送给后端
      const values = {
        uName: uName.value,
        context: context.value
      }

      // 清空文本框的内容
      uName.value = ''
      context.value = ''

      // 通过 websockte 发送消息
      websocket.send(JSON.stringify(values))
    }

    // 接收服务器返回的消息
    websocket.onmessage = function(data) {
      // 服务器返回过来的聊天信息
      const chatS = JSON.parse(data.data)

      // 添加到页面上
      charRoom.innerHTML += `
        <strong>${chatS.uName}：</strong>
        <span>${chatS.context}</span>
        <br />
      `
    }

    // 服务器断开连接，客户端会触发
    // websocket.onclose = function() {}
  </script>
</body>
</html>

② 使用 socket.io 框架制作一个聊天框

socket.io 对 websocket 做了很完整的封装，核心代码只需要几步就可以完成了，具体的步骤我不会再向上面那么详细的介绍，这里我直接给各位完整的代码，可以结合我的注释来食用。当然最好的学习途径肯定是官网文档了：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 引入或者是直接下载到本地进行引入。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.socket.io/4.4.0/socket.io.min.js"
    integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous">
  </script>
</head>
<body>
  <!-- 需要一进入浏览器就要建立链接 -->
  <!-- 点击按钮发送消息给服务器 -->
  输入姓名：<input type="text" id="uName">
  <br>
  输入消息：<input type="text" id="context">

  <button id="btn"> 点击发送消息 </button>

  <div id="charRoom"></div>

  <script>
    // 用户名
    const uName = document.getElementById('uName')
    // 文本框内容
    const context = document.getElementById('context')
    // 点击按钮
    const btn = document.getElementById('btn')
    // 要显示聊天室的区域
    const charRoom = document.getElementById('charRoom')

    // 使用 socket.io 框架与服务器相连接
    const socket = io.connect('http://localhost:8080')

    // 点击发送消息的事件
    btn.onclick = function() {
      // 将用户名和要发送的内容放在一个对象中，一起传送给后端
      const values = {
        uName: uName.value,
        context: context.value
      }

      // 清空文本框的内容
      uName.value = ''
      context.value = ''

      // 通过 socket.io 框架向服务器发送数据
      socket.emit('sendMsg', values)
    }
    
    // 使用 socket.on 方法监听服务端发送过来的数据
    socket.on('pushMsg', data => {
      // 添加到页面上
      charRoom.innerHTML += `
        <strong>${data.uName}：</strong>
        <span>${data.context}</span>
        <br />
      `
    })
  </script>
</body>
</html>

也附上一个效果图吧： 请添加图片描述

avatar
文章
阅读
粉丝