Express 实战: 使用 express-ws 实现 WebSocket 协议

Express 实战: 使用 express-ws 实现 WebSocket 协议

简介

在普通的前后端场景中，HTTP 是我们最常用的通信协议之一，但是 HTTP 总是一问一答，并且总是由客户端向服务端请求。这时候有这么一个业务场景：

后端的某部分数据更新或是接收到某个消息时，才主动更新前端更新。

在这样的场景之下，很明显 HTTP 协议并不能满足我们的需求，这时候就要换新的协议登场啦：WebSocket（标识符 ws）

参考

WebSocket 教程-阮一峰	http://www.ruanyifeng.com/blog/2017/05/websocket.html
WebSocket-MDN	https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
WebSocket协议入门介绍	https://www.cnblogs.com/nuccch/p/10947256.html
NodeJs实现WebSocket——express-ws	https://www.jianshu.com/p/b0700d4162e7

正文

什么是 WebSocket？

WebSocket 是一个隶属于应用层的网络通信协议，与 HTTP 同层并且同样是基于传输层的 TCP 协议；而与 HTTP 不同的是，WebSocket 提供双向传输能力，可以从服务端主动向客户端推送消息(数据)。

这边给出 WS 和 HTTP 的比较图，关于协议的详细解说可以查看参考链接或是其他资料，这边就不做赘述。

（图自参考一-阮一峰老师的教程）

服务端 WebSocket

到目前为止我们就只知道 WS 在 C/S 架构下，提供了客户端和服务端双向传输的能力，我们先来建设好服务端部分的 WebSocket 服务。

express、express-ws

本篇选用 Express 框架以及框架相关的 express-ws 来构建 WebSocket 服务端。

有关构建 Express 应用可以查看我之前写过的 Express 项目启动

服务端结构

/websocket-demo-be
|- node_module/
|- src/
    |- index.js
|- package.json
|- yarn.lock

初始化和配置服务端

本篇选用 yarn 工具来作为服务端的包管理工具

$ yarn init -y
$ yarn add express express-ws

使用 yarn init 会自动建立 package.json，并在其中添加 script 后续将会用到

并且安装 express、express-ws 包，也是后续会用到的服务的基础，下面给出 package.json 的内容

• package.json

{
   
   
  "name": "websocket-demo-be",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
   
   
    "start": "node src/index.js"
  },
  "dependencies": {
   
   
    "express": "^4.17.1",
    "express-ws": "^4.0.0"
  }
}

搭建一般 Express 服务

首先我们先写出最基本的 Express 服务端，相关步骤和内容说明可以查看前一篇：Express 项目启动，这边直接给出项目内容

• index.js

const express = require('express')

const app = express()

app.get('/', function (req, res, next) {
   
   
  res.send('Hello World!')
})

const port = 3000
app.listen(port, () => {
   
   console.log(`express server listen at http://localhost:${
     
     port}`)})

• 输出结果

$ yarn start
yarn run v1.22.10
node src/index.js
express server listen at http://localhost:3000

使用浏览器访问 http://localhost:3000 看到 Hello World! 表示启动成功

添加 WebSocket 服务

上面我们搭建出原本一般使用 HTTP 的 express 服务，接下来我们加入 express-ws 来启用 WebSocket 服务：

• index.js

const express = require('express')
const expressWs = require('express-ws') // 引入 WebSocket 包

const app = express()
expressWs(app) // 将 WebSocket 服务混入 app，相当于为 app 添加 .ws 方法

app.get('/', function (req, res, next) {
   
   
  res.send('Hello World!')
})

// 建立 WebSocket 服务
// 
// 第一个参数为服务路径： /basic
// 第二个参数为与前端建立连接时会调用的回调函数
//   ws 相当于建立 WebSocket 的实例
//   req 为建立连接的请求
app.ws('/basic', function (ws, req) {
   
   
  console.log('connect success')
  console.log(ws)
  
  // 使用 ws 的 send 方法向连接另一端的客户端发送数据
  ws.send('connect to express server with WebSocket success')

  // 使用 on 方法监听事件
  //   message 事件表示从另一段（服务端）传入的数据
  ws.on('message', function (msg) {
   
   
    console.log(`receive message ${
     
     msg}`)
    ws.send('default response')
  })

  // 设置定时发送消息
  let timer = setInterval(