express 怎么搭建 WebSocket 服务器

一:使用 express-ws

var express = require('express');
var app = express();
var expressWs = require('express-ws')(app);

app.use(function (req, res, next) {
  console.log('middleware');
  req.testing = 'testing';
  return next();
});

app.get('/', function(req, res, next){
  console.log('get route', req.testing);
  res.end();
});

app.ws('/path', function(ws, req) {
  console.log('socket', req.testing);
  ws.on('message', function(msg) {
    console.log('message', msg);
    ws.send(msg);
  });
});

app.listen(3000);

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>
<body>
    <script>
        const ws = new WebSocket('ws://localhost:3000/path');

        ws.onopen = () => {
            console.log('Connected to the server');
            ws.send('Hello Server!');
        };

        ws.onmessage = (event) => {
            console.log(`Message from server: ${event.data}`);
        };

        ws.onclose = () => {
            console.log('Disconnected from the server');
        };
    </script>
</body>
</html>

二:使用 Socket.IO

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);

const io = socketIo(server, {
    path: '/path', // 设置Socket.IO的路径
    cors: {
      origin: "*"
    }
});

io.on('connection', (socket) => {
    console.log('New client connected');
    
    socket.on('message', (message) => {
        console.log(`Received message => ${message}`);
        
        // Broadcast the message to all clients
        io.emit('message', `Server: ${message}`);
    });

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

客户端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Example</title>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        const socket = io('http://localhost:3000', {
          path: '/path'
        });

        socket.on('connect', () => {
            console.log('Connected to the server');
            socket.send('Hello Server!');
        });

        socket.on('message', (message) => {
            console.log(`Message from server: ${message}`);
        });

        socket.on('disconnect', () => {
            console.log('Disconnected from the server');
        });
    </script>
</body>
</html>

<think>好的,我需要帮助用户了解如何在Express框架中实现WebSocket服务器。首先,用户提到了使用WebSocket和Socket.IO,所以应该涵盖这两种方法。记得按照系统级指令,正确使用行内公式和独立公式的格式,不过这里可能数学内容不多,但如果有的话要注意。比如,如果有关于消息频率的公式,可能需要用$...$包裹。 首先,用户需要教程和示例代码,所以步骤要分清楚。可能需要先介绍WebSocket的基本概念,然后分步骤讲解如何集成到Express中。同时,用户提供的参考引用里提到了使用Socket.IO,所以这部分也要详细说明,包括安装、服务端和客户端的代码示例。 然后,生成相关问题,这部分需要思考用户可能感兴趣的后续问题,比如性能优化、身份验证、与前端框架的集成等。要确保问题相关且有助于进一步学习。 另外,注意引用标识的位置,比如在提到实时通信的重要性时,引用[^1],在提到微信小程序和Express脚手架时,引用[^2]。需要自然地将引用插入到相关内容后面,避免生硬。 代码部分需要用正确的语法,比如使用三个反引号包裹Python或JavaScript代码,并标明语言类型。同时,确保代码示例正确,比如使用ExpressWebSocket库或Socket.IO的正确写法。 最后,检查是否所有行内数学表达式(如果有的话)都正确使用了$...$,独立公式用$$...$$,但这个问题中可能数学内容较少,但如果有提到比如消息频率的计算,可能需要应用。 现在,整理步骤: 1. 介绍WebSocket的基本概念,结合引用说明实时通信的重要性。 2. 分步骤讲解使用`ws`库在Express中创建WebSocket服务器,包括安装、服务端代码、客户端代码示例。 3. 分步骤讲解使用Socket.IO,同样包括安装、服务端和客户端代码,并说明其优势如自动重连、房间支持等。 4. 提供相关问题,如性能优化、身份验证、与小程序集成等。 需要确保每个步骤的代码示例正确,并且引用正确的位置。例如,在提到WebSocket时引用,在涉及微信小程序集成时引用[^2]。 可能需要注意,用户提供的引用是关于微信小程序和Express脚手架的内容,所以在相关问题中可以生成一个关于如何与微信小程序集成的问题,并引用。 现在,按照这个思路构建回答,确保结构清晰,代码正确,引用自然。</think>### 如何在 Express 框架中实现 WebSocket 服务器 #### 1. 使用原生 `ws` 库 **步骤 1:安装依赖** ```bash npm install express ws ``` **步骤 2:创建 Express 服务器并集成 WebSocket** ```javascript const express = require('express'); const WebSocket = require('ws'); const app = express(); const port = 3000; // 创建 HTTP 服务器 const server = app.listen(port, () => { console.log(`Express 服务器运行在 http://localhost:${port}`); }); // 创建 WebSocket 服务器实例 const wss = new WebSocket.Server({ server }); // 监听 WebSocket 连接 wss.on('connection', (ws) => { console.log('客户端已连接'); // 接收消息 ws.on('message', (message) => { console.log(`收到消息: ${message}`); // 广播消息给所有客户端 wss.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }); // 监听关闭事件 ws.on('close', () => { console.log('客户端断开连接'); }); }); ``` **步骤 3:客户端代码示例** ```html <!DOCTYPE html> <script> const ws = new WebSocket('ws://localhost:3000'); ws.onopen = () => { console.log('已连接到服务器'); }; ws.onmessage = (event) => { console.log('收到消息:', event.data); }; // 发送消息 ws.send('Hello WebSocket!'); </script> ``` --- #### 2. 使用 Socket.IO(更高级的封装) **步骤 1:安装依赖** ```bash npm install express socket.io ``` **步骤 2:集成 Socket.IO 到 Express** ```javascript const express = require('express'); const { createServer } = require('http'); const { Server } = require('socket.io'); const app = express(); const httpServer = createServer(app); const io = new Server(httpServer, { cors: { origin: "*" // 允许跨域 } }); // 监听 Socket.IO 连接 io.on('connection', (socket) => { console.log('客户端已连接:', socket.id); // 接收消息 socket.on('message', (data) => { console.log('收到消息:', data); // 广播消息给所有客户端 io.emit('message', data); }); // 断开连接 socket.on('disconnect', () => { console.log('客户端断开连接:', socket.id); }); }); httpServer.listen(3000, () => { console.log('服务器运行在 http://localhost:3000'); }); ``` **步骤 3:客户端代码示例** ```html <!DOCTYPE html> <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script> <script> const socket = io('http://localhost:3000'); socket.on('connect', () => { console.log('已连接到服务器'); socket.send('Hello Socket.IO!'); }); socket.on('message', (data) => { console.log('收到消息:', data); }); </script> ``` --- ### 关键区别与适用场景 - **`ws` 库**: 轻量级,适合需要直接操作 WebSocket 协议的场景。 - **Socket.IO**: 提供自动重连、房间(Rooms)、命名空间(Namespaces)等高级功能,适合复杂实时应用[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值