node通过websocket实现聊天室功能案例

原创

叫做长大จุ๊บ 2023-05-28 00:41:05 ©著作权

文章标签 websocket 网络协议网络 node.js 服务器 文章分类 Redis 数据库

©著作权归作者所有：来自51CTO博客作者叫做长大จุ๊บ的原创作品，请联系作者获取转载授权，否则将追究法律责任

以下是一个使用Node.js和WebSocket实现的简单聊天室案例：

安装依赖包

npm install ws express

创建一个服务器

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  // 处理消息
  ws.on('message', (message) => {
    // 广播消息
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

server.listen(8080, () => {
  console.log('Server started on port 8080');
});

创建一个前端页面

<!DOCTYPE html>
<html>
  <head>
    <title>WebSocket Chat</title>
  </head>
  <body>
    <div>
      <input type="text" id="message" />
      <button onclick="send()">Send</button>
    </div>
    <div id="messages"></div>

    <script>
      const socket = new WebSocket('ws://localhost:8080');

      // 处理消息
      socket.onmessage = (event) => {
        const messages = document.getElementById('messages');
        const message = document.createElement('div');
        message.innerText = event.data;
        messages.appendChild(message);
      };

      // 发送消息
      function send() {
        const messageInput = document.getElementById('message');
        const message = messageInput.value;
        messageInput.value = '';
        socket.send(message);
      }
    </script>
  </body>
</html>