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() 方…...
告别拍脑袋规划！用ArcGIS做绿道选线：如何科学量化坡度、水域、道路成本并加权计算
科学规划绿道的ArcGIS高阶技法：从成本栅格构建到最优路径生成绿道规划从来不是简单的"两点之间直线最短"，而是需要综合考虑地形、生态、人文等多维因素的复杂决策过程。传统规划中常见的"拍脑袋"决策方式，往往导致建成后…...
Unity主题系统设计：状态驱动的主题抽象与自动注入方案
1. 这不是换个颜色那么简单：为什么Unity项目里“换肤”总在发布前夜崩盘？你有没有经历过这样的场景：美术同学凌晨两点发来一套新主题资源包，UI设计师说“这次配色更符合品牌调性”，产品说“上线前必须支持深色模式”&a…...
LangGraph状态机工程：构建复杂AI工作流的完整指南
传统RAG（检索增强生成）在处理简单的"单跳"问题时表现良好——“文章里提到了什么” “这个概念是什么意思”——但当问题涉及多个实体之间的关系、需要跨多个文档推理时，传统RAG就显得力不从心。GraphRAG（Graph-based R…...
交流电机驱动器的三种控制模式：前沿切相、后沿切相与同步模式详解
1. 项目概述：一个能玩出花的交流电机驱动器在汽车改装、工业控制或者一些创客项目里，驱动一个交流电机听起来简单，但想让它听话地变速、正反转，甚至实现软启动和精确同步，往往就得搬出笨重又昂贵的工业变频器。今天分享…...
树莓派Zero离线语音交互实战：TTS与STT引擎部署与优化
1. 项目概述：为什么选择树莓派 Zero 来实现语音功能？如果你玩过 Arduino、ESP32 这类微控制器，也接触过树莓派 4B 这样的单板电脑，那你大概能理解那种“选择困难症”：微控制器实时性强、功耗低，但算力有限&…...
Fiddler手机断网真相：TLS握手与证书固定的协议级拦截
1. 为什么Fiddler一开，手机就断网？这不是配置问题，是协议层的“信任危机”Fiddler抓包手机流量，本该是移动开发、测试、安全分析中最基础的操作之一。但几乎每个刚上手的人，都会在第二天早上发现：手机Wi-Fi…...
智能体任务分配算法：从启发式到深度强化学习的演进与实践
1. 项目概述：从“谁来做”到“如何做得更好”的智能进化在机器人集群、无人机编队或是自动化仓储系统中，我们常常面临一个看似简单实则复杂的问题：眼前有一堆任务，手头有一群可用的智能体（机器人、无人机、服务器等&am…...
基于BLE模块的低功耗无线遥控器设计与实现
1. 项目概述：基于BLE模块的无线遥控器设计与实现几年前，我在捣鼓智能家居时，一直想找一个低功耗、响应快、又能自己完全掌控的无线遥控方案。市面上的成品要么协议封闭，要么功耗感人，要么延迟高得让人着急。后来&#…...
如何在原神中解放双手：自动钓鱼、拾取与对话跳过的终极指南
如何在原神中解放双手：自动钓鱼、拾取与对话跳过的终极指南 【免费下载链接】genshin-impact-script 原神脚本，包含自动钓鱼、自动拾取、自动跳过对话等多项实用功能。A Genshin Impact script includes many useful features such as automatic fishing…...
【独家首发】Sora 2 AVI支持并非“开箱即用”：3层封装校验机制详解（RIFF→AVI→OpenCV Mat内存映射链路图解）
更多请点击： https://codechina.net 第一章：Sora 2 AVI支持并非“开箱即用”：核心矛盾与技术定位 Sora 2 的官方文档与发布说明中明确将 AVI 视为“实验性容器支持”，而非默认启用的输入格式。其底层解码栈基于 FFmpeg 5.1 构建&…...