基于Node.js与UniApp的WebSocket单聊实现

作者：栖木时间：2026-10-31 12:58:25浏览：598

本文介绍如何使用Node.js的ws库搭建WebSocket服务器，并结合UniApp实现前端单对单实时聊天功能。内容涵盖服务器初始化、用户连接映射、消息广播逻辑及前端界面模拟，旨在提供完整的WebSocket应用开发参考。

若软件需集成聊天功能，常规做法是接入第三方接口。鉴于此前虽了解但未实际使用过WebSocket，本文旨在通过实践深入探究该技术。

一、搭建WebSocket服务器

鉴于后端采用Node.js，此处亦选用Node.js构建后端服务，以利于后续集成。

1、搭建服务器

首先引入ws库与http库，以此构建WebSocket服务基础。

const WebSocket = require('ws');
const http = require('http');
const url = require('url');
const server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end('WebSocket server is running.');
});

2、初始化WebSocket服务器

需将WebSocket服务绑定至已有的HTTP服务器之上。

const wss = new WebSocket.Server({ server });

3、客户映射

利用Map数据结构存储已连接用户及其对应的客户端实例。

const connectedUsers = new Map();

4、事件处理

连接事件

由于聊天场景为单对单，而WebSocket本质为广播（一对多）传输，因此可通过UserA与UserB的用户名建立连接，仅允许这两方进入该聊天室。

  wss.on('connection', (ws, req) => {
      const query = url.parse(req.url, true).query;
      const userIdA = query.userA;
      const userIdB = query.userB;
      connectedUsers.set(userIdA, ws);
      connectedUsers.set(userIdB, ws);
      // 这里添加其他逻辑，比如我这里是将UserA和UserB从URL里面分离，并且将ID和Web socket客户端关联起来，这里也可以做一下用户认证之类的操作
  });

关闭事件

当用户断开连接时，从映射中移除该用户对应的ID。

  ws.on('close', () => {
      console.log(`Connection closed for users ${userIdA} and ${userIdB}.`);
      connectedUsers.delete(userIdA);
      connectedUsers.delete(userIdB);
  });

错误事件

记录连接期间发生的任何错误。

  ws.on('error', (message) => {
      console.error(`Error occurred for users ${userIdA} and ${userIdB}:`, err);
  });

消息接收

此事件处理连接过程中用户在广播中发送的消息。将其解析为JSON内容（因本例为单对单，数据包含sender、receiverID、content），通过此方式查找接收者并将消息广播给接收者。

  ws.on('message', (message) => {
      const dataMessage = message.toString()
      const data = JSON.parse(dataMessage)[0]
      const senderId = data.sender;
      const receiverId = data.receiverID;
      const content = data.content;
      // 广播消息给接收方
      const receiverWs = connectedUsers.get(receiverId);
      if (receiverWs) {
          receiverWs.send(JSON.stringify({ sender: senderId, content, receiver:receiverId }));
      } else {
          console.warn(`Receiver ${receiverId} is not connected.`);
      }
  });

5、WebSocket！启动！

最后，指定监听端口并启动WebSocket服务器即可。

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

二、前端uniapp应用

此处使用UniApp制作基础分屏，左侧模拟A用户，右侧模拟B用户。

一、搭建WebSocket服务器

左侧使用messageA存储消息，右侧使用messageB存储消息（虽可合并，但分屏演示能更显著地体现即时通讯功能）。

<template>
    <view class="content">
        <view class="a">
            <view class="text">
                <div v-for="(item, index) in messagesA" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="请输入文本" @input="inputa" :value="inputaV" />
            <button @click="sumA">发送</button>
        </view>
        <view class="b">
            <view class="text">
                <div v-for="(item, index) in messagesB" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="请输入文本" @input="inputb" :value="inputbV" />
            <button @click="sumB">发送</button>		
        </view>
    </view>
</template>

data() {
    return {
        inputaV: '',//a用户输入
        inputbV: '',//b用户输入
        messagesA:[],//a用户的消息列表
        messagesB: [],//b用户的消息列表
        url: 'ws://127.0.0.1:3000',//使用ws连接连接到webSocket服务器
        socket: null,//socket实例
        userA: 'a',//a用户的id
        userB: 'b',//b用户的id
    }
},

//初始化，在进入软件后便处理url连接，将a用户和b用户的id放入到url连接中（此方法在初始化页面的时候就要进行调用）
//并且在两个用户连接到服务器中绑定消息的回调函数，使得有任意一个用户发送消息之后都会接受到消息
enter() {
    let url = `${this.url}?userA=${this.userA}&userB=${this.userB}`;
    this.connect(url);
    uni.onSocketMessage(this.onSocketMessage（）); // 绑定消息接收回调
},
//连接方法，此方法是在用户在进入页面中就调用的，让两个用户连接到websocket服务器中
connect(url) {
    this.socket = uni.connectSocket({
        url,
        success() {
            console.log('WebSocket连接成功');
            uni.onSocketOpen(() => {
                console.log('WebSocket连接已打开！');
            });
        },
        fail(err) {
            console.error('WebSocket连接失败', err);
        }
    });
},
//用户a发送消息的事件
sumA() {
    if (this.socket) {
        //将消息中带上发出人，接收人，确保信息无误
        this.messagesA.push({
            sender: this.userA,
            content: this.inputaV,
            receiverID: this.userB
	})
        let data = JSON.stringify(this.messagesA)
        uni.sendSocketMessage({
            data
        });
        this.inputaV = ''
    } else {
	console.log('连接失败');
    }
},
//用户b发送消息的事件
sumB() {
    if (this.socket) {
        this.messagesA.push({
            sender: this.userB,
            content: this.inputbV,
            receiverID: this.userA
        })
	let data = JSON.stringify(this.messagesA)
	uni.sendSocketMessage({
            data
        });
	this.inputbV = ''
    } else {
        console.log('连接失败');
    }
},
//获取消息事件，在任意用户发送消息之后，前端可以监听到消息的接受，我们只需要将数据进行处理即可
//因为用户的显示是用的messageA/messageB，所以我们可以通过不同的接收人来对不同的数据进行处理
onSocketMessage(res) {
    let data = JSON.parse(res.data)
    let sender = data.sender
    let content = data.content
    let receiver = data.receiver
    if(receiver == this.userA){
        this.messagesA.push({
            sender,
            content,
            receiverID
	})
    }else if(receiver == this.userB){
	this.messagesB.push({
            sender,
            content,
            receiverID
        })
    }
},

总结

至此，基础的WebSocket服务器搭建与使用已完成。WebSocket对后端要求及前后端紧密联系至关重要，本文仅为小型实验与想法，如有不妥之处请指正。

以上就是JavaScript WebSocket实现实时双向聊天的详细内容，更多关于JavaScript WebSocket双向聊天的资料请关注本站其它相关文章！

作者最新文章

NestJS 是什么？与 Express、Koa 的核心区别及选型建议

2026-11-05 13:46:41

生产环境升级 Node.js 的注意事项与兼容性测试策略

2026-11-05 09:19:24

nvm 常用命令详解：怎么平滑切换和升级 Node.js 版本

2026-11-04 09:02:34

JavaScript和JSP的根本区别：运行环境与执行机制解析

2026-11-03 23:30:18

使用nvm卸载指定版本Node.js并切换默认环境

2026-11-03 23:09:26