Node+Express创建一个WebSocket服务器实例

小半 • 2024年3月2日下午5:59 • 前端开发 • 阅读 267

创建Express

mkdir socket-server
cd socket-server
npm init

用该npm init命令为您的应用程序创建一个package.json文件。此命令会提示您输入许多信息，例如应用程序的名称和版本。

entry point: (app.js)

我们可以改成app.js,作为我们的入口文件，也可以默认index.js。

现在在 socket-server目录下面安装Express

npm install express

安装ws

npm install ws
//或者
yarn add ws

构建WebSocket服务器实例

在app.js文件下：

const express = require('express')
const app = express()
const port = 3000
//创建WebSocket服务器实例
const { WebSocketServer } = require('ws')
//指定要运行的端口
const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', ws => {
  //计算客户数量
  console.log(wss.clients.size + ' clients connected');
  //发送给所有客户
  wss.clients.forEach(client => {
    //发送信息
    client.send('甄嬛传讨论组！！！')
    client.send(wss.clients.size + '人一起在讨论')
  })
  //从客户端接收到数据时调用
  ws.on('message',data=>{
    //显示消息内容
    console.log(data.toString());
    //如果消息是空的
    if (data.toString() === '') {
      console.log('消息为空')
    }else{
      //向客户端发送消息
      wss.clients.forEach(client => {
        console.log(`分发消息:${data}`)
        client.send(`${data}`)
      })
    }
  })
  //断开连接
  ws.on('close',()=>{
    //计算客户数量
    console.log(wss.clients.size + ' clients connected');
    wss.clients.forEach(client => {
      //发送信息
      client.send('一个退出了讨论组！！！')
      client.send(wss.clients.size + '人一起在讨论')
    })
  })

  //错误调用
  ws.onerror = function (err) {
    console.log('websocket error',err)
  }
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

连接测试

在项目根目录下面创建一个index.html文件，然后连接我们的WebSocket

//app.js
...
app.get('/',(req,res) => {
  res.sendFile(__dirname + '/index.html')
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
</head>
<body>
<input type="text" id="message" placeholder="Type message here">
<button onclick="send()">Send</button>
<script>
    const socket = new WebSocket('ws://localhost:8080');
    socket.onmessage = (event) => {
        console.log(event.data);
    };
    function send() {
        const message = document.getElementById('message').value;
        socket.send(message);
    }
</script>
</body>
</html>