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

WebSocket在node端和客户端的使用

news 2025/9/23 13:35:12

摘要

如果想要实现一个聊天的功能，就会想到使用WebSocket来搭建。那如果没有WebSocet的时候，我们会以什么样的思路来实现聊天功能呢？

假如有一个A页面 和 B页面进行通信，当A发送信息后，我们可以将信息存储在文件或者数据库里。
但是B页面并不知道A发送了信息，所以如果想要让B 页面实时的去展示A发送的信息，我们只能在B页面设置一个定时器，在定时器中一直去查询文件或者数据库的信息，如果有新的消息，那么就在B页面进行展示，同理，在A页面也要以相同的方法去实现。

在这里插入图片描述

对于这个方法，需要不停的去轮训，耗费了大量的空间和时间，那如果在A 发送消息后，B页面可以主动的接收到对应的消息，就不需要在定时器中去不停的查找了。

WebSocket，就是为了解决这个问题出现的。WebSocket支持双向通信，服务器和客户端之间可以随时互相发送信息，实时性更强。

1. ws模块

在node中，大家对于fs模块，http模块应该已经不陌生了。这里我们需要引入的模块是ws模块，需要通过npm install进行安装。

WS模块是一个WebSocket协议的实现，它允许客户端（一般是浏览器）和服务器之间建立持久连接，进行实时双向通信。这种持久连接可以使得数据传输更加高效，适用于需要实时交互的应用场景，如在线聊天室、游戏等。

现在我们简单的使用一下：
新建一个文件夹，npm init初始化，再npm install ws
在文件夹下新建一个index.js

const WebSocket = require('ws')const wss = new WebSocket.Server({port: 3004});wss.on('connection', (ws) => {//如果有客户端连接，就会进入这个回调console.log('Client connected');ws.on('message', (message) => {// 如果有客户端发送消息，就会进入这个回调console.log(message.toString());})
})

这样一个简单的ws的node端就实现了。现在我们新建一个html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="width: 200px;height:300px;background: #e2e2e2;margin-bottom: 20px;"><span></span></div><input type="text"><button>发送</button><script>// 创建ws模块var ws = new WebSocket(`ws://localhost:3004`);// 建立连接ws.onopen = function () {// 客户端向服务端发送消息ws.send('hello word');console.log('已连接');}</script>
</body>
</html>

这样就是一个简单的客户端向服务端发送消息的模型。

2.从服务端发往客户端

上面的代码主要实现了从客户端到服务端，但这也是正常思路。我们肯定是希望从服务端到客户端。
所以我们要在服务端接受到消息后，也往客户端发送消息：

const WebSocket = require('ws')const wss = new WebSocket.Server({port: 3004});wss.on('connection', (ws) => {console.log('Client connected');ws.on('message', (message) => {console.log(message.toString());// 服务端向客户端发送消息ws.send('hello word too')})
})

在客户端里，我们通过onmessage的回调来进行接受：

  <script>var ws = new WebSocket(`ws://localhost:3004`);ws.onopen = function () {ws.send('hello word');console.log('已连接');}ws.onmessage = async function(mes) {// 接受服务端发送的消息console.log(mes.data)}</script>

3.对于不同的客户端，返回不同的信息

那如果想实现出一个聊天的功能，服务端接受到A的消息，要给B发送消息。
上面的代码似乎只能，谁给服务端发，服务端就给谁返回。

所以在node的代码里，我们需要每次建立连接的时候，将对应的ws保存起来，然后根据客户端的信息，用指定的ws去返回信息。

现在我们如果有两个html，每个html在初始化页面的时候，给服务端发送一个消息，代表自己已经连接的信息。
点击按钮的时候，给服务端发送的信息，要携带希望传递的客户端的信息。

页面1：

  <script>var ws = new WebSocket(`ws://localhost:3004`);ws.onopen = function () {ws.send(JSON.stringify({name: 'zhangsan', message: 'init'}));console.log('已连接');}ws.onmessage = async function(mes) {console.log(mes.data)}function click() {const value = input.value;ws.send(JSON.stringify({name: 'lisi', message: '你好lisi'}))}</script>

页面2：

  <script>var ws = new WebSocket(`ws://localhost:3004`);ws.onopen = function () {ws.send(JSON.stringify{name: 'lisi', message: 'init'}));console.log('已连接');}ws.onmessage = async function(mes) {console.log(mes.data)}function click() {const value = input.value;ws.send(JSON.stringify({name: 'zhangsan', message: '你好zhangsan'}))}</script>

在node端中，我们要根据message是否为init，进行判断。

const WebSocket = require('ws')const wss = new WebSocket.Server({port: 3004});
const wsList = {}wss.on('connection', (ws) => {ws.on('message', (message) => {const result = JSON.parse(message);// 页面初始化的时候，使用wsList将ws进行缓存if(result.message === 'init') {wsList[result.name] = ws;}else {// 根据name的值来给指定的客户端发送信息const ws = wsList[result.name];ws.send(result.message)}})ws.on('close', () => {Object.keys(wsList).forEach(item => {// 当websoket关闭的时候，要清空对应的wsif(wsList[item].readyState !== 1) {delete wsList[item]}})})
})

以上就是对应ws模块，和WebSocket的简单阐述。

相关文章：

WebSocket在node端和客户端的使用

摘要 如果想要实现一个聊天的功能&#xff0c;就会想到使用WebSocket来搭建。那如果没有WebSocet的时候&#xff0c;我们会以什么样的思路来实现聊天功能呢&#xff1f; 假如有一个A页面 和 B页面进行通信&#xff0c;当A发送信息后&#xff0c;我们可以将信息存储在文件或者…...

编程日记 2023/11/14 1:37:42

ENVI IDL：如何将txt文本文件转化为GeoTIFF文件？

01 前言 此处的文本文件形式如下&#xff1a; 里面包含了众多点位信息&#xff08;不是站点数据&#xff09;&#xff0c;我们需要依据上述点的经纬度信息放到对应位置的像素点位置&#xff0c;放置完后如下&#xff1a; 可以发现&#xff0c;还存在部分缺失值&#xff0c;我们…...

编程日记 2023/11/14 1:36:40

北邮22级信通院数电：Verilog-FPGA（9）第九周实验（2）实现下降沿触发的JK触发器（带异步复位和置位功能）

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 JK.v module JK (input clk,input J,input K,input…...

编程日记 2023/11/14 1:35:40

pyqt5UI同步加载

问题记录&#xff1a;pyqt5 怎样实现修改ui而不改变py代码&#xff0c;例如一个文件存入ui代码&#xff0c;另一个文件引入ui代码 起因&#xff1a;由于在写一个漏扫工具&#xff0c;由于ui的平频繁改动导致主体代码结构变动&#xff0c;所以先有没有方法能够不改变主题代码&am…...

编程日记 2023/11/14 1:34:39

CentOS 7 安装 Redis 5 （单机 6379）

CentOS 7 安装 Redis 5 &#xff08;单机 6379&#xff09; 自己准备好 Redis 5 的安装包并上传至 /opt/ 下的 redis 文件夹下&#xff1a; cd /opt mkdir redis cd redis准备好 Redis 所需的编译环境&#xff1a; yum -y install gcc yum -y install gcc-c解压上传的 Redis…...

编程日记 2023/11/14 1:33:38

sqlplus set参数大区

通过设置不同的SET参数&#xff0c;可以定制SQLPlus的行为和输出格式&#xff1a; SET 参数描述SET AUTOTRACE显示SQL语句的执行计划和统计信息&#xff0c;用于性能优化。SET FEEDBACK控制是否显示SQL语句执行的行数&#xff0c;可提高结果可读性。SET LINESIZE设置每行的最大…...

编程日记 2023/11/14 1:32:37

从0到0.01入门React | 006.精选 React 面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...

编程日记 2023/11/14 1:31:36

GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题

目录 GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题背景思路分析代码实现引入依赖读取并遍历矢量文件处理并“缝合”一个多边形的内外环结果保存到新的矢量文件中完整代码效果展示仓库代码地址GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问…...

编程日记 2023/11/14 1:30:35

javaSE学习笔记（五）集合框架-Collection，List，Set，Map，HashMap，Hashtable，ConcurrentHashMap

目录 四、集合框架 1.集合概述 集合的作用 集合和数组的区别 集合继承体系 数组和链表 数组集合 链表集合 2.Collection 方法 集合遍历 并发修改异常 3.List List集合的特有功能&#xff08;核心是索引&#xff09; 集合遍历 并发修改异常产生解决方案ListItera…...

编程日记 2023/11/14 1:29:34

web3 React dapp项目通过事件从区块链中拿到 已取消 已完成 和所有的订单数据 并存入redux中

好 上文web3通过antd 在React dapp中构建订单组件基本结构我们算是把一个基本的订单组件展示做出来了 然后 我们继续 起一下环境先 ganache 终端运行 ganache -dMetaMask 登录一下 然后 打开项目 发布一下合约 truffle migrate --reset然后 运行一下 测试脚本 转入交易所 E…...

编程日记 2023/11/14 1:28:33

25、Flink 的table api与sql之函数(自定义函数示例)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

编程日记 2023/11/14 1:27:32

MybatisPlus —注解汇总

本文将介绍 MybatisPlus 注解包相关类详解&#xff08;更多详细描述可点击查看源码注释&#xff09; 注解类包源码&#xff1a;&#x1f449; mybatis-plus-annotation(opens new window) 一、#TableName(opens new window) 描述&#xff1a;表名注解&#xff0c;标识实体类对…...

编程日记 2023/11/14 1:26:29

flink对状态ttl进行单元测试

背景 在处理键值分区状态时&#xff0c;使用ttl设置过期时间是我们经常使用的&#xff0c;但是任何代码的修改都需要首先进行单元测试&#xff0c;本文就使用单元测试来验证一下状态ttl的设置是否正确 测试状态ttl超时的单元测试 首先看一下处理函数&#xff1a; // 处理函…...

编程日记 2023/11/14 1:25:29

Mac电脑安装打印机驱动

1.在打印机背面找到型号&#xff0c;当想要安装的驱动在官网找不到时可直接搜索该系列&#xff1a;比如MF系列 2.安装完成后需要添加打印机 当打印机和电脑在同一个WiFi下的时候查找打印机IP&#xff0c;输入IP后可以查到对应的打印机&#xff0c;添加后即可使用...

编程日记 2023/11/14 1:24:27

C语言 每日一题 牛客网 11.13 Day17

找零 Z国的货币系统包含面值1元、4元、16元、64元共计4种硬币&#xff0c;以及面值1024元的纸币。 现在小Y使用1024元的纸币购买了一件价值为N(0 < N≤1024)的商品&#xff0c;请问最少他会收到多少硬币&#xff1f; 思路 运用if语句进行判断分类 代码实现 int main() {…...

编程日记 2023/11/14 1:23:26

python读取npy和dat文件信息

前言 python读取.dat 和 .npy 数据 Code import numpy as np def read_dat():print("read data .dat \n")path "./c1_input.dat"data np.fromfile(path, np.float16).reshape(4,38,800)print(fdata :{data}, data shape:{data.shape}, data dtype:{d…...

编程日记 2023/11/14 1:22:24

【Git】第四篇：基本操作（理解工作区、暂存区、版本库）

Git 工作区、暂存区和版本库 工作区&#xff1a;就是我们创建的本地仓库所在的目录暂存区&#xff1a; stage或index&#xff0c;一般放在.git(可隐藏文件)目录下的index文件&#xff08;.git/index&#xff09;中&#xff0c;所以我们把暂存区有时候也叫做索引&#xff08;in…...

编程日记 2023/11/14 1:21:21

Word转PDF简单示例，分别在windows和centos中完成转换

概述 本篇博客以简单的示例代码分别在Windows和Linux环境下完成Word转PDF的文档转换。 文章提供SpringBoot Vue3的示例代码。 文章为什么要分为Windows和Linux环境&#xff1f; 因为在如下提供的Windows后端示例代码中使用documents4j库做转换&#xff0c;此库需要调用命令行…...

编程日记 2023/11/14 1:20:19

推荐收藏！大模型算法工程师面试题来了（附答案）

自 ChatGPT 在去年 11 月底横空出世&#xff0c;大模型的风刮了整一年。 历经了百模大战、Llama 2 开源、GPTs 发布等一系列里程碑事件&#xff0c;将大模型技术推至无可争议的 C 位。基于大模型的研究与讨论&#xff0c;也让我们愈发接近这波技术浪潮的核心。 最近大模型相关…...

编程日记 2023/11/14 1:19:18

线程与进程

文章目录 什么是进程&#xff1f;什么是线程&#xff1f;线程、进程的区别多线程编程 什么是进程&#xff1f; 进程&#xff08;Process&#xff09;是计算机中的程序关于数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位。简单来说&#xff0c;进程就…...

编程日记 2023/11/14 1:18:17

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/9/18 5:24:07

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/17 3:19:40

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/9/21 14:04:58

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/9/21 5:09:32

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/8/25 19:36:37

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/7/7 19:28:43

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

编程新知 2025/9/21 10:36:20

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...

编程新知 2025/9/21 14:05:37

使用python进行图像处理—图像滤波（5）

图像滤波是图像处理中最基本和最重要的操作之一。它的目的是在空间域上修改图像的像素值&#xff0c;以达到平滑&#xff08;去噪&#xff09;、锐化、边缘检测等效果。滤波通常通过卷积操作实现。 5.1卷积(Convolution)原理 卷积是滤波的核心。它是一种数学运算&#xff0c;…...

编程新知 2025/9/11 1:19:03