利用websocket实现一个聊天demo（超简单node版）

最新推荐文章于 2024-05-01 23:03:56 发布

liyfn

最新推荐文章于 2024-05-01 23:03:56 发布

阅读量1.1k

点赞数 12

分类专栏：做点小玩具文章标签： websocket java 网络协议

本文链接：https://blog.csdn.net/qq_42825643/article/details/128166193

版权

做点小玩具专栏收录该内容

5 篇文章 2 订阅

订阅专栏

文章目录

一、前言

闲来无事做，刚好最近了解了websocket，那就利用websocket实现一个简单的聊天功能；

二、实现效果

在这里插入图片描述
因为只是demo版，没有做太多的优化，只实现了一对一的聊天，也没有进行样式优化，其他功能后续再补充。

三、实现思路

1.功能简述

两个页面a,b。在a页面输入内容发送后，在b页面打印出来，反之亦然；

2.实现思路

服务端：
1.创建node项目
2.引用ws模块创建socket服务
3.监听请求，根据请求参数“转发”给不同的客户端

客户端
1.发送socket请求
2.请求需要携带参数区分不同客户端
3.请求需要携带参数区分发送地址

四、实现步骤

1.创建项目

yarn init -y

2.安装依赖

yarn add ws

3.创建node接口

3.1创建并启动服务

let WebSocket = require("ws");
// 启动服务
let wss = new WebSocket.Server({ port: 3000 });
console.log("服务已启动http://127.0.0.1:3000");

3.2 监听请求，并处理数据
这里两个地方解释一下

1.因为socket服务端可以同时与多个客户端建立连接，为了可以给每个客户端发送消息，我们把每个连接都存起来，同时增加一个id标志位，用来区分是哪个页面的连接。
2. msg.toString();这里，因为接收到的msg方法默认是流数据，需要使用toString（）方法还原一下。

// 存储连接
let socket = [];
// 监听连接
wss.on("connection", (ws, req) => {
  let index = req?.url.indexOf("=");
  let id = req?.url.slice(index + 1);
  socket.push({ ws, id });
  // 监听接收的消息
  ws.on("message", (msg) => {
    let m = msg.toString();
    // 发送消息
    socket.forEach((item) => {
      if (item.id == JSON.parse(m).to) {
        item.ws.send(m);
      }
    });
  });
});

4.在页面发送请求

这个很简单，建立连接后使用send发送消息，使用onmessage 监听接收的消息；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="" id="" placeholder="请输入发送内容" />
    <button onclick="sendmsg()">发送</button>
    <script>
    // 拼接id方便服务端区分来源，实际应用中应该使用用户唯一标识
      let ws = new WebSocket("ws://127.0.0.1:3000/id=1");
      ws.onopen = () => {
        console.log("已连接");
      };
      ws.onmessage = (msg) => {
        console.log("接收到消息", JSON.parse(msg.data).val);
      };
      ws.onclose = () => {
        console.log("已断开");
      };
      function sendmsg() {
        let val = document.querySelector("input").value;
        // 传入 to字段区分发送地址
        ws.send(JSON.stringify({ to: 2, val }));
      }
    </script>
  </body>
</html>

五、其他

当然，本次实现的只是一个demo，仅供娱乐，工程化应用中当然不能使用。更多内容，期待后续更新~~

感谢各位看官观看，如有好的建议或发现文章中有错误地方，请不吝赐教，先谢~~

liyfn

关注

12
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
5
评论
利用websocket实现一个聊天demo（超简单node版）

闲来无事做，刚好最近了解了websocket，那就利用websocket实现一个简单的聊天功能；两个页面a,b。在a页面输入内容发送后，在b页面打印出来，反之亦然；
复制链接

扫一扫