【Express.js】集成Websocket

集成websocket

本节我们介绍在如何在 express 中集成 websocket。

WebSocket 服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

准备工作

  • 创建一个 express.js 项目(本文基于evp-express-cli)
  • 安装ws.js:(本教程使用更通用的ws.js,有兴趣的同学可以去了解express-ws.js)
console 复制代码
npm i ws

创建代理

正常的项目都是分层的,为了避免循环依赖,本文采用代理类构造单例的方式来创建websocket服务器。

wsProxy.js:

在构造器内创建websocket服务器,并监听个别事件,最后把服务器赋给server成员变量。再定义一个静态的获取实例方法,调用时实例若为空,就构建实例:

js 复制代码
const {WebSocketServer} = require('ws');

class WebsocketProxy {
  /**@type {WebsocketProxy} */
  static INSTANCE;
  server;
  constructor() {
    const _server = new WebSocketServer({
      server: require('./server')
    })

    this.server = _server;
    
    _server.on("listening", () => {
      console.log(`websocket server is listening.`);
      
    })

    _server.on("connection", (ws) => {
      console.log(`websocket client connection`);
      ws.send(`Hello, I'm WebSocket server.`);
      ws.on("message", (message) => {
        ws.send(`${message}`);
      })
    })
  }

  static instance() {
    if(!WebsocketProxy.INSTANCE) {
      WebsocketProxy.INSTANCE = new WebsocketProxy();
    }
    return WebsocketProxy.INSTANCE;
  }
}

function init() {
  return WebsocketProxy.instance();
}

module.exports = {
  init
};

最后把服务器导出来:

js 复制代码
async function init() {
  return RedisProxy.instance();
}

module.exports = {
  init,
  instance: RedisProxy.instance(),
};

然后在任意其它地方调用 wsProxy.instance 即可获取单例,在从单例中获取server即可主动操作websocket.

js 复制代码
const WsProxy = require('../utils/wsProxy');
const wsProxy = WsProxy.instance;
const wsServer = wsProxy.server;

你可以自己手动配置一遍,也可以使用evp-express-cli作为手脚架创建项目并选择websocket模板。

关于 ws.js 的详细用法请见官方文档: https://www.npmjs.com/package/ws

下一节-集成SocketIO

相关推荐
速易达网络1 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
IT_陈寒1 小时前
SpringBoot多环境配置把我坑惨了,这个踩坑经验你最好看看
前端·人工智能·后端
码事漫谈2 小时前
DeepSeek 搞了个 "Super-agent",但不是超级智能
后端
吴凡wudianmei2 小时前
从 0 搭一个 AI Agent(四):SSE 跑通之后,三处“契约错配”与它们的修复边界
前端·后端·aigc
paopaokaka_luck2 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
kyriewen2 小时前
我验了 7 种 sticky 失效说法:3 种根本不成立
前端·javascript·程序员
小兔子2 小时前
defer 的参数在写下那一刻就求值了,循环里这样写会踩坑
后端
苍何2 小时前
腾讯 Buddy One 来了,办公生态一键打通 WorkBuddy(附教程)
后端
Tokenfree2 小时前
把通义千问接进工单系统:三个版本够用,但有两个坑没人提前告诉我
后端
wei_shuo2 小时前
MongoDB迁移实战:基于SQL的文档数据开发与多模态融合实践
后端