nodejs使用WebSocket实现聊天效果
在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 模块，…...
【仿muduo库one thread one loop式并发服务器实现】
文章目录 一、项目介绍1-1、项目总体简介1-2、项目开发环境1-3、项目核心技术1-4、项目开发流程1-5、项目如何使用 二、框架设计2-1、功能模块划分2-1-1、SERVER模块2-1-2、协议模块 2-2、项目蓝图2-2-1、整体图2-2-2、模块关系图2-2-2-1、Connection 模块关系图2-2-2-2、Accep…...
10.2 继承与多态
文章目录 继承多态 继承 继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性，派生类提供更丰富的属性和行为。在构造派生类时，其基类构造函数先被调用，然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…...
Go红队开发—格式导出
文章目录 输出功能CSV输出CSV 转 结构体结构体 转 CSV端口扫描结果使用CSV格式导出 HTML输出Sqlite输出nmap扫描 JSONmap转json结构体转jsonjson写入文件json编解码json转结构体json转mapjson转string练习：nmap扫描结果导出json格式 输出功能 在我们使用安全工具的…...
线性代数之矩阵特征值与特征向量的数值求解方法
文章目录 前言1. 幂迭代法（Power Iteration）幂法与反幂法求解矩阵特征值幂法求最大特征值编程实现补充说明 2. 逆幂迭代法（Inverse Iteration）移位反幂法 3. QR 算法（QR Algorithm）——稠密矩阵理论推导编程…...
Spring MVC源码分析のinit流程
文章目录 前言一、 init1.1、createWebApplicationContext1.2、onRefresh 二、请求处理器2.1、RequestMapping2.2、Controller接口2.3、HttpRequestHandler接口2.4、HandlerFunction 三、initHandlerMappings3.1、getDefaultStrategies3.1.1、RequestMappingHandlerMapping3.1.…...
【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等等）
【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等） 文章目录 1、go框架对比介绍2、go-zero 微服务开发实践3、go-zero 文件上传问题优化 1、go框架对比介绍 国内开源goland框架对比 1 go-…...
C#程序加密与解密Demo程序示例
目录 一、加密程序功能介绍 1、加密用途 2、功能 3、程序说明 4、加密过程 5、授权的注册文件保存方式 二、加密程序使用步骤 1、步骤一 编辑2、步骤二 3、步骤三 4、步骤四 三、核心代码说明 1、获取电脑CPU 信息 2、获取硬盘卷标号 3、机器码生成 3、 生成…...
小程序事件系统 —— 33 事件传参 - data-*自定义数据
事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参； 在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成…...
深入解析 JavaScript 原型与原型链：从原理到应用
原型和原型链是 JavaScript 中实现对象继承和属性查找的核心机制。为了更深入地理解它们，我们需要从底层原理、实现机制以及实际应用等多个角度进行分析。 1. 原型（Prototype） 1.1 什么是原型？ 每个 JavaScript 对象（…...
关于AI数据分析可行性的初步评估
一、结论：可在部分环节嵌入，无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题，内部文件要注意数据安全风险。 2.AI（指高规格大模型）十分适合探索性研究分析，对复杂报告无法全流程执行&…...
回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测
回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测 目录 回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测回归效果基本介绍GWO-BP-Adaboost:基于灰狼算法优化BP神经网络结合Adaboost思想…...
ARM Cortex-M 内存映射详解:如何基于寄存器直接读写 寄存器映射方式编码程序 直接操作硬件寄存器来控制 MCU
ARM Cortex-M 的系统映射空间 在 STM32 等 ARM Cortex-M 系列 MCU 中，内存地址空间按照 存储功能 进行了严格划分，包括 Flash（程序存储）、RAM（数据存储）、外设寄存器（GPIO、UART、SPI 等&am…...
深度学习实战车辆目标跟踪与计数
本文采用YOLOv8作为核心算法框架，结合PyQt5构建用户界面，使用Python3进行开发。YOLOv8以其高效的实时检测能力，在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化，该数据集包含丰富的车辆目标图像样本…...
django中视图作用和视图功能 以及用法
在 Django REST Framework（DRF）中，视图（View）是处理 HTTP 请求并返回响应的核心组件。DRF 提供了多种视图类，适用于不同的场景和需求。以下是 DRF 中常见的视图类及其作用、使用方法的详细说明： 一、DRF 视图的分类 DRF 的视图可以分为以下几类： 基于函数的视图（Func…...
【每日学点HarmonyOS Next知识】输入框自动获取焦点、JS桥实现方式、Popup设置全屏蒙版、鼠标事件适配、Web跨域
1、HarmonyOS TextInput或TextArea如何自动获取焦点？ 可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点，具体可以参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attribut…...
【学习思维模型】
学习思维模型 一、理解类模型二、记忆类模型三、解决问题类模型四、结构化学习模型五、效率与习惯类模型六、高阶思维模型七、实践建议八、新增学习思维模型**1. 波利亚问题解决四步法****2. 主动回忆（Active Recall）****3. 鱼骨图（因果图/Ishikawa Diagram）****4. MECE原则…...
MyBatis-Plus分页控件使用及使用过程发现的一个坑
最近维护一个旧项目的时候，出现了一个BUG，经排查后发现是Mybatis-plus分页控件使用的时候需要注意的一个问题，故在本地使用MybatisPlus模拟出现了一下这个问题。 首先，先说一下MyBatis-Plus的使用： 1）引入…...
STM32的APB1和APB2的区别
STM32微控制器中的APB1和APB2的区别 STM32微控制器中的APB1和APB2是两种不同的外设总线，主要区别在于时钟速度、连接的外设以及用途。以下是它们的详细对比： 1. 时钟速度 APB1 (Advanced Peripheral Bus 1): 低速总线，时钟频率通常为系统时钟…...
JS一些小知识点
一、|| 运算符 plain this.ctx.body { type: type || 0, // ||在此处用法用于默认值填充，判断是否传参或该值是否存在，如果不存在就使用||后买你的值作为默认值 code: code || 0, msg: msg || SUCCESS, data: data || {}, ...others }; 二、trim() 方…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...