当前位置：首页 > news >正文

nodejs使用WebSocket实现聊天效果

news 来源：原创 2025/8/23 12:18:00

在nodejs中使用WebSocket实现聊天效果（简易实现）

安装

npm i ws

实现

创建 server.js

/*** 创建一个 WebSocket 服务器，监听指定端口，并处理客户端连接和消息。** @param {Object} WebSocket - 引入的 WebSocket 模块，用于创建 WebSocket 服务器。** 功能步骤：* 1. 创建一个 WebSocket 服务器，监听端口 1024。* 2. 维护一个消息列表 `list`，用于存储客户端发送的消息。* 3. 当客户端发送消息时，解析消息内容并将其添加到消息列表中。* 4. 将更新后的消息列表发送回客户端。*/const WebSocket = require('ws')// 消息列表，用于存储所有客户端发送的消息
let list = []// 创建 WebSocket 服务器，监听端口 1024
const wss = new WebSocket.Server({port: 1024},() => {console.log('Server is listening on port 1024')}
)// 监听客户端连接事件
wss.on('connection', function (ws) {// 监听客户端发送的消息事件ws.on('message', function (msg) {// console.log('收到客户端消息', JSON.parse(msg))try {// 解析客户端发送的消息if (msg) {// 如果消息没有错误，将消息内容添加到消息列表中list.push(JSON.parse(msg).netName + ' 说: ' + JSON.parse(msg).msg)}} catch (error) {}// 将更新后的消息列表发送回客户端ws.send(JSON.stringify(list))})
})

创建 client.js 测试

/*** 创建一个WebSocket客户端，用于连接指定的WebSocket服务器。** 参数:* - 'ws://192.168.8.183:1024': WebSocket服务器的URL地址。*/
const WebSocket = require('ws')const ws = new WebSocket('ws://192.168.8.183:1024')// 当WebSocket连接成功打开时触发
ws.on('open', function () {console.log('Client is listening on port 1024') // 打印日志，表示客户端已成功连接到服务器ws.send(JSON.stringify('Hello World')) // 向服务器发送消息
})// 当接收到服务器发送的消息时触发
ws.on('message', function (msg) {console.log('收到服务器消息', JSON.parse(msg))// ws.send(msg) // 将接收到的消息原样返回给服务器
})// 当WebSocket连接关闭时触发
ws.on('close', function () {console.log('Client close') // 打印日志，表示客户端连接已关闭
})

分别运行以上两个文件，如果互相能收到消息表示服务运行正常

创建 index.html 文件

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>WebSocket 消息发送</title><style>/* 消息输入框样式 */#text {width: 350px;height: 30px;}/* 用户名输入框样式 */#netName {width: 150px;height: 30px;}</style></head><body><!-- 消息显示区域 --><textarea id="msg" cols="80" rows="30" readonly></textarea><br /><!-- 用户名输入框 --><input id="netName" type="text" placeholder="名称" /><!-- 消息输入框 --><input id="text" type="text" placeholder="消息" /><!-- 发送按钮 --><button id="sendButton">发送</button><script>let ws = null // WebSocket 连接对象/*** 初始化 WebSocket 连接*/function initWebSocket() {if (ws) return // 避免重复连接ws = new WebSocket('ws://192.168.8.183:1024')ws.onopen = () => {console.log('WebSocket 连接已建立')}ws.onmessage = (evt) => {try {const receivedData = JSON.parse(evt.data)msg.value = Array.isArray(receivedData) ? receivedData.join('\n') : JSON.stringify(receivedData, null, 2)} catch (error) {console.error('解析接收到的数据失败:', error)}}ws.onerror = (error) => {console.error('WebSocket 错误:', error)}ws.onclose = () => {console.log('WebSocket 连接已关闭，尝试重新连接...')ws = nullsetTimeout(initWebSocket, 5000) // 5 秒后重连}setInterval(() => {ws.send('')}, 1000)}/*** 发送消息到 WebSocket 服务器* @param {Object} data - 要发送的数据对象*/function sendMessage(data) {if (!ws || ws.readyState !== WebSocket.OPEN) {console.warn('WebSocket 未打开，尝试重新连接...')initWebSocket()return}if (!data) {data = { err: 1 }} else if (typeof data !== 'object' || Array.isArray(data)) {console.error('数据格式无效')return}ws.send(JSON.stringify(data))}/*** 处理发送按钮点击或回车键事件*/function handleSend() {const netNameValue = netName.value.trim()const textValue = text.value.trim()if (!netNameValue || !textValue) {alert('用户名和消息不能为空')return}const message = {netName: netNameValue,msg: textValue}sendMessage(message)text.value = '' // 清空消息输入框}// 初始化 WebSocket 连接initWebSocket()// 绑定发送按钮点击事件document.getElementById('sendButton').addEventListener('click', handleSend)// 监听回车键事件document.addEventListener('keyup', (e) => {if (e.key === 'Enter') {handleSend()}})</script></body>
</html>

用两个浏览器打开此文件，就可以互相发送消息

静态文件服务

或者创建一个 static.js 静态服务访问 index.html

// static.jsconst express = require('express')
const app = express()
const path = require('path')app.use('/main', express.static(path.join(__dirname, 'index.html'))) // 设置静态文件夹// 端口号不能与socket监听的端口号一样
app.listen(2048, () => {console.log('static 2048 Server Start~')
})

启动服务

node static.js

访问： http://127.0.0.1:2048/main

以上所有文件放在同一目录

nodejs使用WebSocket实现聊天效果

在nodejs中使用WebSocket实现聊天效果（简易实现） 安装 npm i ws 实现创建 server.js /*** 创建一个 WebSocket 服务器，监听指定端口，并处理客户端连接和消息。** param {Object} WebSocket - 引入的 WebSocket 模块&#xff0c…...

编程日记 2025/8/23 12:18:00

通领科技冲刺北交所

高质量增长奔赴产业新征程日前，通领科技已正式启动在北交所的 IPO 进程，期望借助资本市场的力量，加速技术升级，推动全球化战略布局。这一举措不仅展现了中国汽车零部件企业的强大实力，也预示着行业转型升级的新突破。…...

编程日记 2025/8/19 7:09:47

利用LLMs准确预测旋转机械（如轴承）的剩余使用寿命（RUL）

研究背景研究问题：如何准确预测旋转机械（如轴承）的剩余使用寿命（RUL），这对于设备可靠性和减少工业系统中的意外故障至关重要。研究难点：该问题的研究难点包括：训练和测试阶段数据分布不一致、长期RUL预测的泛化能力有限。相关工作：现有工作主要包括基于模型的方法、数…...

编程日记 2025/8/23 12:14:58

comctl32!ListView_OnSetItem函数分析LISTSUBITEM结构中的image表示图标位置

第一部分： BOOL ListView_SetSubItem(LV* plv, const LV_ITEM* plvi) { LISTSUBITEM lsi; BOOL fChanged FALSE; int i; int idpa; HDPA hdpa; if (plvi->mask & ~(LVIF_DI_SETITEM | LVIF_TEXT | LVIF_IMAGE | LVIF_STATE)) { …...

编程日记 2025/8/22 7:40:44

Django工程获取请求参数的几种方式

在 Django 中获取请求参数的完整方法如下： 一、GET 请求参数获取 def view_func(request):# 获取单个参数（推荐方式）name request.GET.get(name, default) # 带默认值age request.GET.get(age, 0)# 获取多个同名参数（如复选框…...

编程日记 2025/8/23 12:15:49

使用Qt调用HslCommunication（C++调用C#库）

使用C/CLI 来调用C#的dll 任务分解： 1、实现C#封装一个调用hsl的dll； 2、实现C控制台调用C#的dll库； 3、把调用C#的dll用C再封装为一个dll； 4、最后再用Qt调用c的dll； 填坑： 1、开发时VS需要安装CLI项目库…...

编程日记 2025/8/22 16:19:08

C++中的构造函数

目录一、什么是构造函数： 二、构造函数的特性和使用： 1、构造函数的特性： 2、构造函数的重载： 三、默认生成的构造函数： 一、什么是构造函数： 在C中，当创建一个对象之后，就会自…...

编程日记 2025/8/23 12:09:37

MySQL知识点（第一部分）

MySQL 基础： 1、SQL语句的分类： DDL：用于控制数据库的操作DML：用于控制表结构的字段，增、删、修DQL：用于查询语句DCL：用于管理数据库，用户，数据库的访问权限。 2、M…...

编程日记 2025/8/19 5:14:06

Lua怎么学？Lua编程实战：从基础语法到高级特性

朋友们，大家好，我是袁庭新。我的《Lua编程实战：从基础语法到高级特性》教程上线了！这是一套从零掌握Lua编程，涵盖基础到高级，以实战驱动，快速上手Lua开发的精品教程！ 我为什么要研发…...

编程日记 2025/8/18 8:06:23

Qt常用控件之纵向列表QListWidget

纵向列表QListWidget QListWidget 是一个纵向列表控件。 QListWidget属性属性说明currentRow当前被选中的是第几行。count一共有多少行。sortingEnabled是否允许排序。isWrapping是否允许换行。itemAlignment元素的对齐方式。selectRectVisible被选中的元素矩形是否可见。s…...

编程日记 2025/8/20 2:34:27

Manus无需邀请码即可使用的平替方案-OpenManus实测

文章目录 Manus 简介核心定位技术架构核心特点应用场景性能表现用户体验发展计划OpenManus技术架构与设计理念核心功能特性应用场景案例与闭源Manus的差异对比安装使用与实战演示执行过程记录简单案例-快速写一个helloworld的java程序复杂案例-分析特斯拉汽车近三年财务数据并生…...

编程日记 2025/8/23 12:07:29

git如何解除远程仓库改变远程仓库地址

这三个命令通常一起使用来更改项目的远程仓库地址： 查看当前远程仓库配置：git remote -v移除旧的远程仓库配置：git remote remove origin添加新的远程仓库配置：git remote add origin 新的远程仓库地址要解除当前项目的远程仓库…...

编程日记 2025/8/23 11:25:10

VSCode 配置优化指南：打造高效的 uni-app、Vue2/3、JS/TS 开发环境

VSCode 配置优化指南，适用于 uni-app、Vue2、Vue3、JavaScript、TypeScript 开发，包括插件推荐、设置优化、代码片段、调试配置等，确保你的开发体验更加流畅高效。 1. 安装 VSCode 如果你还未安装 VSCode，可前往 VSCode 官网下载最新版并安装。 2. 安装推荐插件 (1) Vue…...

编程日记 2025/8/23 12:15:49

云计算：虚拟化、容器化与云存储技术详解

在上一篇中，我们深入探讨了网络安全的核心技术，包括加密、认证和防火墙，并通过实际案例和细节帮助读者全面理解这些技术的应用和重要性。今天，我们将转向一个近年来迅速发展的领域——云计算。云计算通过提供按需访问的计算资源，彻底改变了IT基础设施的构建和管理方式。本…...

编程日记 2025/8/18 2:29:27

oracle 数据导出方案

工作中有遇到需要将oracle 数据库表全部导出，还需要去除表数据中的换行符。方案 shell 设计封装函数 1 function con_oracle() 用于连接oracle 2 function send_file() 用于发送文件 3 主程序使用循环将所有表导出并发送到数据服务器主程序程序代码 #!…...

编程日记 2025/8/21 20:04:44

电商项目-秒杀系统(四)秒杀异步下单防止重复秒杀

一、防止恶意刷单解决在生产场景下，可能会有一些人会恶意访问当前网站，来进行恶意的刷单。这样会造成当前系统出现一些业务上的业务混乱，出现脏数据，或者造成后端访问压力大等问题。一般要解决这个问题的话，前端可…...

编程日记 2025/8/23 7:47:14

Express 中 get 参数获取

1. 使用 req.query 获取 URL 查询字符串参数在 GET 请求中，参数通常以查询字符串的形式附加在 URL 后面，格式为 ?参数名1值1&参数名2值2 。Express 里可通过 req.query 对象获取这些参数。 const express require("express"); const …...

编程日记 2025/8/22 4:31:09

《Python实战进阶》No17: 数据库连接与 ORM（SQLAlchemy 实战）

No17: 数据库连接与 ORM（SQLAlchemy 实战） 摘要本文深入探讨SQLAlchemy在复杂场景下的高级应用，涵盖四大核心主题： 会话生命周期管理：通过事件钩子实现事务监控与审计追踪混合继承映射：结合单表/连接表继…...

编程日记 2025/8/23 2:14:14

运行OpenManus项目（使用Conda）

部署本项目需要具备一定的基础：Linux基础、需要安装好Anaconda/Miniforge（Python可以不装好，直接新建虚拟环境的时候装好即可），如果不装Anaconda或者Miniforge，只装过Python，需要确保Python是3.…...

编程日记 2025/8/23 11:31:12

Linux一键美化命令行，一键安装zsh终端插件

zsh应该是很多人第一个用的Linux终端美化软件但是其安装略微复杂，让人有些困扰所以我花了两天写了一键安装脚本，实测运行后直接安装好适用于Ubuntu、Debian、Red Hat、macOS等系统直接安装好zsh 以及常用插件 autojump 跳转插件 zsh-syntax-highlig…...

编程日记 2025/8/21 8:35:39

OpenManus介绍及本地部署体验

1.OpenManus介绍 OpenManus，由 MetaGPT 团队精心打造的开源项目，于2025年3月发布。它致力于模仿并改进 Manus 这一封闭式商业 AI Agent 的核心功能，为用户提供无需邀请码、可本地化部署的智能体解决方案。换句话说，OpenManus 就像…...

编程日记 2025/8/21 20:14:21

2025-03-09 学习记录--C/C++-PTA 习题10-7 十进制转换二进制

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。💪🏻 一、题目描述 ⭐️ 裁判测试程序样例： #include <stdio.h>void dectobin( int n );int main() {int n;scanf(…...

编程日记 2025/8/23 11:24:01

计算机网络----主要内容简介

这里写目录标题章节概览每章的大体结构结构功能与服务的关系一些概念概念一概念二传统的网络层的工作方式（路由IP）现代的网络层的工作方式（SDN） 章节概览其中，网络层分为了两章下面的红色部分是部分选修每章的大…...

编程日记 2025/8/21 20:19:28

基于python大数据的招聘数据可视化与推荐系统

博主介绍：资深开发工程师，从事互联网行业多年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了多年的设计程序开发，开发过上千套设计程序，没有什么华丽的语言，只有…...

编程日记 2025/8/18 14:43:44

VBA高级应用30例Excel中ListObject对象：提取表内单元格的格式元素

《VBA高级应用30例》（版权10178985），是我推出的第十套教程，教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开，这套教程案例与理论结合，紧贴“实战”，并做“战术总结”，以…...

编程日记 2025/8/20 18:39:05

数据结构基础之《（19）—矩阵处理》

一、zigzag打印矩阵 Z字形打印矩阵 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 打印顺序：1,2,7,13,8,3,4,9,14... 核心技巧：找到coding上的宏观调度左上角有A、B两个点，A往右一步一步走，B往下一步一步走写一个…...

编程日记 2025/8/20 5:23:54

用Python写一个算24点的小程序

一、运行界面二、显示答案——递归介绍工作流程： 1. 基本情况：函数首先检查输入的数字列表 nums 的长度。如果列表中只剩下一个数字，它会判断这个数字是否接近 24（使用 abs(nums[0] - 24) < 1e-10 来处理浮点数精度问题&…...

编程日记 2025/8/19 4:26:09

基于深度学习的网络摄像头图像实时分类实践：从理论到完整实现

引言：智能视觉感知的新可能在人工智能技术蓬勃发展的今天，实时图像分类作为计算机视觉的基础任务之一，正在深刻改变着我们的生活。从智能手机的人脸解锁到无人超市的自动结算系统，从工业质检的缺陷检测到医疗影像的辅助诊断&…...

编程日记 2025/8/19 12:36:40

C++ 算法竞赛STL以及常见模板

目录 STL /*═══════════════ Vector ═══════════════*/ /*════════════════ Pair ════════════════*/ /*══════════════ String ════════════════*/ /*══════════…...

编程日记 2025/8/23 2:14:15

【资料分享】wireshark解析脚本omci.lua文件20250306版本发布（独家分享）

引言 omci.lua文件是Wireshark的OMCI协议解析插件的核心组件。它配合BinDecHex.lua，可以解析OMCI协议的数据包，提取出消息类型、受管实体标识、受管实体属性等关键信息，并以人类可读的形式显示在Wireshark的解码视图中，方便研发人…...

编程日记 2025/8/18 3:04:07

(dfs 单词搜索)leetcode 79

核心思路用双重循环以所有的位置都作为起始点开始遍历设置边界条件上下左右都搜一次，不合适就回来，二叉树思想经过的结点设置"#避免重复搜索导致数据混乱递归完后要还原原字符 #include<iostream> #include<vector> #include&l…...

编程日记 2025/8/18 15:32:45

Java常用集合与映射的线程安全问题深度解析

Java常用集合与映射的线程安全问题深度解析一、线程安全基础认知在并发编程环境下，当多个线程同时操作同一集合对象时，若未采取同步措施，可能导致以下典型问题： 数据竞争：多个线程同时修改数据导致结果不可预测状…...

编程日记 2025/8/23 11:00:18

【实战ES】实战 Elasticsearch：快速上手与深度实践-5.1.1热点分片识别与均衡策略

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 5.1.1 Filebeat Logstash ES Kibana 全链路配置实1. 架构设计与组件选型1.1 技术栈对比分析1.2 硬件配置推荐 2. Filebeat 高级配置2.1 多输入源配置2.2 性能优化参数 3.…...

编程日记 2025/8/16 10:03:09

服务端和客户端通信(TCP)

服务端 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading.Tasks;namespace TeachTcpServer {class Program{static void Main(string[] args){#region 知识点一 …...

编程日记 2025/8/22 5:55:22

安装

实现

静态文件服务

相关文章：