基于websocket实现Web群聊

一杯雪花勇闯天涯

已于 2023-05-06 21:10:33 修改

阅读量1.9k

点赞数

分类专栏：音视频技术文章标签： websocket 前端 javascript

于 2023-05-06 21:09:28 首次发布

本文链接：https://blog.youkuaiyun.com/u014265398/article/details/130535582

版权

音视频技术专栏收录该内容

2 篇文章

订阅专栏

该文章展示了如何在Node.js环境中安装和使用ws模块创建WebSocket服务器，监听客户端连接、发送和接收消息。当有用户连接、发送消息或断开连接时，服务器会广播事件给所有在线用户，实现了简单的群聊功能。在客户端，文章提供了一个HTML页面，用于输入文本并显示聊天记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装node中ws模块

npm install ws

Node中处理代码

const WebSocket = require("ws");
const wsServer = new WebSocket.Server({port:3000});
var maps = new Map();
var number = 0;
var sendMessage = {};
wsServer.on('connection',(socket) => {
    console.log("Client Connected");
    number++;
    socket.userID = number;
    let client = {
        userID:socket.userID,
        Connection:socket
    }
    maps.set(socket.userID,client);
    sendMessage.type='enter';
    sendMessage.message="user"+socket.userID+"进来了!";
    broadCast(JSON.stringify(sendMessage));
    
    socket.on('message',(message) => {
      console.log('received:'+message);
      sendMessage.type='message';
      sendMessage.message="user"+socket.userID+":"+message+".";
      broadCast(JSON.stringify(sendMessage));
    });
    socket.on('close', () => {
        console.log('Connected Close');
        sendMessage.type='close';
        sendMessage.message="user"+socket.userID+" leave out!";
        maps.delete(socket.userID);
        broadCast(JSON.stringify(sendMessage));
    });


    function broadCast(message) {
        for(let val of maps.values()) {
            val.Connection.send(message);
        }
    }
});

页面代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>websocket群聊</title>
</head>
<body>
   <div id="app">
       <input type="text" id="text"/>
       <button id="send">发送</button>
       <div id="content"></div>
   </div>
</body>
</html>
<script>
    var websocket = new WebSocket("ws://127.0.0.1:3000");
    var dataList = [];
    websocket.onopen = function (event) {
        console.log("正在建立连接...");
    }
    websocket.onclose = function (closeEvent) {
        console.log("连接正在关闭...");
        dataList = [];
    }
    websocket.onmessage = function (message) {
    	console.log(message);
        let data = message.data;
        if (typeof data == "string") {
            data = JSON.parse(data);
        }
        //接受来自服务器发送的消息
        dataList.push(data);
        showMessage(dataList);
    }
    websocket.onerror = function (event) {
        console.log("连接发生错误");
        console.log(event);
    }
    function showMessage(data) {
      let html = "";
      for (let i =0;i<data.length;i++) {
          let type = data[i].type;
          if (type == 'enter') {
              html+="<div style='color:deepskyblue'>"+data[i].message+"</div>";
          } else if (type == 'message') {
              html+="<div style='color:black'>"+data[i].message+"</div>";
          } else if (type == 'close') {
              html+="<div style='color:red'>"+data[i].message+"</div>";
          }
      }
      //将元素动态显示到页面上
        document.querySelector('#content').innerHTML = html;
    }
     window.onbeforeunload = function (){
        websocket.close();
    }
    document.querySelector('#send').onclick = function() {
    	let text = document.querySelector('#text').value;
    	console.log(text);
    	websocket.send(text);
    }
 
</script>

实现效果

在这里插入图片描述