学以致玩【Node.js实战】-从0搭建WebSocket实时聊天项目，用Vscode摸鱼聊天

小白鲨2024-06-06 18:02

一个简单的WebSocket小练习，适合像我一样的小白。和开发同事用Vscode终端聊天，摸鱼大师。

先来粗略整理一下WebSocket的相关知识点：

WebSocket

WebSocket是HTML5提供的一种协议，与传统的HTTP请求-响应模型不同，WebSocket允许在客户端和服务器之间建立持久连接，双方可进行双向通信，直到连接关闭。

应用场景 由于WebSocket持久连接、双向通信、低延迟的特点，常用的应用场景：实时聊天、实时通知、多人在线游戏、实时协作工具等。

服务端初步搭建

初始化项目

  1. 创建项目文件夹
  2. 在文件夹目录下执行npm init初始化package.json文件
  3. 创建index.js，作为服务器
  4. 安装Node.js的ws库：npm install ws

创建WebSocket服务器 创建服务器：new WebSocketServer(options[, callback])

js 复制代码 
// 引入WebSocketServer类
const { WebSocketServer } = require('ws');

// 自定义端口号
const PORT = 8124;

// 创建并启动WebSocket服务器，监听PORT端口号
const wsServer = new WebSocketServer({ port: PORT }, () => {
    console.log("WebSocket服务端创建成功，地址为 ws://127.0.0.1:8124");
})

服务器监听连接事件 connection事件，回调函数参数：

  • websocket: WebSocket实例（服务器与接入的客户端之间的连接）
  • request: 客户端发送的http请求信息，本例中未用到
js 复制代码 
// 服务器监听connection事件，有客户端成功连接时触发
wsServer.on("connection", (ws) => {

})

监听消息 对于每个接入的客户端（webSocket实例，即回调函数中的ws），我们监听其message、error、close事件，以实现消息接收、错误处理、连接关闭。

js 复制代码 
// 服务器监听connection事件，有客户端成功连接时触发
wsServer.on("connection", (ws) => {
    // 监听消息事件
    ws.on('message', (message) => {
        console.log('接收消息:', message);
    });

    // 监听关闭事件
    ws.on('close', () => {
        console.log('客户端关闭！');
    });

    // 监听错误事件
    ws.on('error', (error) => {
        console.log('WebSocket error:', error);
    });
})

至此，简单的服务器搭建好了，我们先来创建客户端，双方能够连接成功再进行下一步。

客户端初步搭建

初始化项目

  1. 另外创建项目文件夹
  2. 其他步骤同服务器端

创建WebSocket连接 客户端创建连接：new WebSocket(address,[, protocols][, options]) 此处的address(连接地址)为服务端的IP地址及端口号，其他可选参数本例未用到。

js 复制代码 
// 引入WebSocket类
const { WebSocket } = require("ws");

// 创建webSocket
const ws = new WebSocket("ws://127.0.0.1:8124");

监听open事件 连接成功建立时，会触发open事件。

js 复制代码 
// 连接成功建立
ws.on('open', () => {
    console.log('连接成功！');
})

监听消息 接收服务端发来的消息，通过监听message事件，回调函数参数：data为Buffer类型。

Buffer用于处理二进制数据，通过toLocaleString()将其转换为字符串

js 复制代码 
ws.on("message", function message(data) {
    console.log(data.toLocaleString());
});

// 监听错误
ws.on("error", console.error);

测试连接

完成以上步骤后，我们先测试连接是否能成功建立：先运行服务端index.js，创建服务器，再运行客户端的index.js，连接到服务器。注意IP地址和端口号保持一致。

如果连接成功，服务端终端：

客户端：

这里成功开启了连接，但双方还不能发送消息，接下来我们实现发送消息的部分。

客户端发送消息

客户端通过命令行来进行输入，首先我们需要先获取用户输入。此处我们使用node内置模块readline获取用户输入。

创建readline实例

  • input 属性指定了从哪里读取输入，这里使用了 process.stdin，表示从标准输入流中读取用户的输入
  • output 属性指定了输出到哪里，这里使用了 process.stdout，表示向标准输出流中输出信息，通常是在控制台中显示
js 复制代码 
// 引入内置模块readline
const readline = require('readline');

// 创建readline实例
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
})

获取用户输入 在连接成功的回调内，监听readline的'line'事件，获取用户输入，并发送给服务器：

js 复制代码 
// 连接成功建立
ws.on('open', () => {
    console.log('连接成功！');
    // 读取输入
    rl.on('line', (input) => {
        // 将用户输入发送给服务器
        if (input) {
            ws.send(input)
        }
    })
})

创建昵称 这样虽然可以发送消息，但不知道是谁发送的，所以在发送之前，我们先要求每个用户为自己创建昵称。 通过readline向命令行输出问题，并获取用户输入。 之后修改上面的写法，在每次发送消息时，捎带上用户名。

js 复制代码 
let userName = '匿名';
// 连接成功建立
ws.on('open', () => {
    console.log('连接成功！');
    rl.question("请输入昵称：", (name) => {
        // 输入有效，则将用户输入的昵称存入全局变量
        name && (userName = name);
        // 读取输入
        rl.on('line', (input) => {
            // 将用户输入发送给服务器，每次捎带上用户名
            if (input) {
                ws.send(userName + ":" + input);
            }
        })
    })
})

服务器转发消息

转发消息 服务器收到某一客户端的消息后，需要将其转发，以便其他所有客户端能看到这条消息，其中ws代表当前发来消息的客户端，它不需要再被转发。

js 复制代码 
// 服务器监听connection事件，有客户端成功连接时触发
wsServer.on("connection", (ws) => {
    // 监听消息事件
    ws.on('message', (message) => {
        wsServer.clients.forEach((client) => {
            if (client !== ws && client.readyState === 1) {
                client.send(message);
            }
        });
    });
})

测试消息收发

重新运行服务端程序，开启多个客户端程序，测试某个客户端发消息，其他客户端是否能收到消息。

简易版完整代码

以上是具备基础功能的命令行聊天工具，开发测试完成后，运行起服务端程序，把client文件夹甩给局域网内的其他人，就可以一起聊天啦！注意连接地址的IP为服务器IP地址。

以下是这个简易版程序的完整代码。

github项目地址：github.com/LightBoatA/...

服务端

js 复制代码 
// 引入WebSocketServer类
const { WebSocketServer } = require('ws');

// 自定义端口号
const PORT = 8124;

// 创建并启动WebSocket服务器，监听PORT端口号
const wsServer = new WebSocketServer({ port: PORT }, () => {
    console.log("WebSocket服务端创建成功，地址为 ws://127.0.0.1:8124");
})

// 服务器监听connection事件，有客户端成功连接时触发
wsServer.on("connection", (ws) => {
    // 监听消息事件
    ws.on('message', (message) => {
        wsServer.clients.forEach((client) => {
            if (client !== ws && client.readyState === 1) {
                client.send(message);
            }
        });
    });

    // 监听关闭事件
    ws.on('close', () => {
        console.log('客户端关闭！');
    });

    // 监听错误事件
    ws.on('error', (error) => {
        console.log('WebSocket error:', error);
    });
})

客户端

js 复制代码 
// 引入WebSocket类
const { WebSocket } = require("ws");
// 引入内置模块readline
const readline = require('readline');

// 创建readline实例
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
})

// 创建webSocket
const ws = new WebSocket("ws://127.0.0.1:8124");

let userName = '匿名';
// 连接成功建立
ws.on('open', () => {
    console.log('连接成功！');
    rl.question("请输入昵称：", (name) => {
        // 输入有效，则将用户输入的昵称存入全局变量
        name && (userName = name);
        // 读取输入
        rl.on('line', (input) => {
            // 将用户输入发送给服务器，每次捎带上用户名
            if (input) {
                ws.send(userName + ":" + input);
            }
        })
    })

})

// 监听消息
ws.on("message", function message(data) {
    console.log(data.toLocaleString());
});

// 监听错误
ws.on("error", console.error);

花里胡哨版

在简易版基础上添加了用户上线通知、下线通知、当前用户查看、服务器通知等功能。 github项目地址：github.com/LightBoatA/...

服务端

js 复制代码 
const { WebSocketServer } = require("ws");

const NOTICE_PERFIX = '--- 通知☆ --- ';
const REPLY_PERFIX = '--- 服务器回复☆ --- ';
let onlineUsers = [];

const wss = new WebSocketServer({ port: 8124 }, () => {
  console.log("success:ws://127.0.0.1:8124");
});

wss.on("connection", function connection(ws) {
  ws.on("error", console.error);
  ws.on("message", function message(data) {
    try {
      const msg = JSON.parse(data);
      switch (msg.type) {
        case 'add_user':
          addUser(msg.data, ws);
          break;
        case 'user_list':
          sendUserList(ws);
          break;
        case 'message':
          broadcastUsers(msg.data, ws);
          break;
        default:
          break;
      }
    } catch (error) {
      broadcastUsers(getServerErrorMsg(error))
    }
  });
  ws.on("close", () => {
    removeUser(ws)
  });
});

const getAllOnlineUsersMsg = (perfix) => {
  return (perfix || NOTICE_PERFIX) + '当前在线用户：' + onlineUsers.map(user => user.username).join('、');
}

const getAddUserMsg = (username) => {
  return NOTICE_PERFIX + username + '上线了！' + '\n' + getAllOnlineUsersMsg();
}

const getRemoveUserMsg = (username) => {
  return NOTICE_PERFIX + username + '下线了！' + '\n' + getAllOnlineUsersMsg();
}

const getServerErrorMsg = (error) => {
  return NOTICE_PERFIX + '服务器故障：' + error;
}

const addUser = (username, ws) => {
  onlineUsers.push({ username, socket: ws });
  const data = getAddUserMsg(username)
  broadcastUsers(data);
  console.log('用户加入');
}

const removeUser = (ws) => {
  const offlineUser = onlineUsers.find(user => user.socket === ws);
  if (offlineUser) {
    onlineUsers = onlineUsers.filter(user => user.socket !== ws)
    const data = getRemoveUserMsg(offlineUser.username);
    broadcastUsers(data);
    console.log('用户离开');
  }
}

const sendUserList = (ws) => {
  const data = getAllOnlineUsersMsg(REPLY_PERFIX);
  ws.send(data);
}

const broadcastUsers = (data, ws) => {
  wss.clients.forEach((client) => {
    if (client !== ws && client.readyState === 1) {
      client.send(data);
    }
  });
}

客户端

js 复制代码 
const { WebSocket } = require("ws");
const ws = new WebSocket("ws://127.0.0.1:8124");
const readline = require("readline").createInterface({
  input: process.stdin,
  output: process.stdout,
});

let name = "匿名用户";

const onLine = () => {
  readline.on("line", (input) => {
    if (input === "close") {
      ws.close();
      readline.close();
    } else if (input === "user list") {
      ws.send(JSON.stringify({ type: "user_list"}))
    }else {
      // 否则将输入发送给服务器
      ws.send(JSON.stringify({ type: "message", data: name + "：" + input}));
    }
  });
};

ws.on("error", console.error);

ws.on("open", function open() {
  console.log("连接成功");
  readline.question("请输入昵称：", (input) => {
    input && (name = input);
    ws.send(JSON.stringify({ type: "add_user", data: name }))
    onLine();
  });
});

ws.on("message", function message(data) {
  console.log(data.toLocaleString());
});
相关推荐
蝶开三月32 分钟前
php：使用socket函数创建WebSocket服务
网络·websocket·网络协议·php·socket
刽子手发艺4 小时前
WebSocket详解、WebSocket入门案例
网络·websocket·网络协议
vener_21 小时前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
老码沉思录1 天前
Android开发实战班 - 网络编程 - WebSocket 实时通信
android·网络·websocket
hope_wisdom2 天前
C++网络编程之WebSocket通信
网络·c++·websocket·网络编程·libwebsockets·boost.beast
applebomb2 天前
【uni-app多端】修复stmopjs下plus-websocket无心跳的问题
websocket·uni-app·app·心跳·stomp·plus-websocket
Dear.爬虫2 天前
Odoo中，要实现实时数据推送，SSE 与 WebSocket 该如何选择
websocket·网络协议·sse·odoo·实时数据推送
zznnniuu3 天前
SpringCloud处理Websocket消息过长自动断开连接
websocket·spring·spring cloud
小英雄Dui5 天前
【nginx】client timed out和send_timeout的大小设置
运维·websocket·nginx
NiNg_1_2345 天前
Spring Boot项目pom.xml文件详解
spring boot·后端·websocket
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10量化方法怎么选？如何评估量化后的大模型LLM？