WebSocket在node端和客户端的使用

摘要

如果想要实现一个聊天的功能,就会想到使用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的简单阐述。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/185780.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安防监控EasyCVR视频汇聚平台无法接入Ehome5.0是什么原因?该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、回放…

2023.11.09 homework (2)

【七年级上数学】 教别人也是教自己&#xff0c;总结下&#xff1a; 13&#xff09;找规律的题目&#xff0c;累加题目&#xff0c;要整体看&#xff0c;不然不容易算出来&#xff0c;求最大值&#xff0c;那么就是【最大值集群和】减去【最小集群和】就是最大值 9-12&#x…

模态对话框和非模态对话框

创建到堆区这样非模态对话框就不会一闪而过 .exec使程序进入阻塞状态 ()[]{}lambda表达式 55号属性可以在对话框关闭的时候将堆区的内存释放掉从而防止内存泄露

在linux安装单机版hadoop-3.3.6

一、下载hadoop https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/core/hadoop-3.3.6/ 二、配置环境变量 1、配置java环境变量 2、配置hadoop环境变量 export HADOOP_HOME/usr/local/bigdata/hadoop-3.3.6 export HBASE_HOME/usr/local/bigdata/hbase-2.5.6 export JA…

手术训练系统项目

★ 手术训练系统项目 项目描述&#xff1a;手术训练系统&#xff0c;它提供了多项功能&#xff0c;包括账户登录与创建、数据库与账户管理、课程管理、小组管理、成绩统计、证书发布、训练和系统设置。 职责描述: 1、训练功能开发&#xff08;任务概述、任务指导、评分规则、评…

71 内网安全-域横向网络传输应用层隧道技术

目录 必备知识点&#xff1a;1.代理和隧道技术区别?2.隧道技术为了解决什么?3.隧道技术前期的必备条件? 演示案例:网络传输应用层检测连通性-检测网络层ICMP隧道Ptunnel使用-检测利用传输层转发隧道Portmap使用-检测,利用传输层转发隧道Netcat使用-检测,利用,功能应用层DNS隧…

Jmeter分布式性能测试细节+常见问题解决,资深老鸟带你避坑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Jmeter分布式测试…

【TiDB】TiDB CLuster部署

目录 0 大纲 一 集群部署工具TiUP简介 1 TiUP 简介 2 TiUP使用 3 TiUP使用举例 二 TiDB Cluster安装配置需求 1 生产环境硬件需求 2 操作系统需求 三 TIDB部署 1 软硬件需求以及前置检查​编辑 2 安装TiUP 组件 ​3 集群拓扑文件 4 执行部署命令 &#xff08;1&…

6-爬虫-scrapy解析数据(使用css选择器解析数据、xpath 解析数据)、 配置文件

1 scrapy解析数据 1.1 使用css选择器解析数据 1.2 xpath 解析数据 2 配置文件 3 整站爬取博客–》爬取详情–》数据传递 scrapy 爬虫框架补充 # 1 打码平台---》破解验证码-数字字母&#xff1a;ddddocr-计算题&#xff0c;滑块&#xff0c;成语。。。-云打码&#xff0c;超…

HK WEB3 MONTH Polkadot Hong Kong 火热报名中!

HK Web3 Month 11月除了香港金融科技周外&#xff0c;HK Web3 Month又是一大盛事&#xff0c;从10月29日开始开幕直到11月18日结束。此次将齐聚世界各地的Web3产业从业者、开发者、社群成员和学生来参与本次盛会。除外&#xff0c;超过75位产业知名的讲者与超过50场工作坊将为…

大数据毕业设计选题推荐-农作物观测站综合监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

linux基础:3.linux基础环境开发工具和配置。

linux基础环境开发工具和配置 一.学习yum工具进行软件安装&#xff1a;1.什么是yum&#xff1a;2.查看软件包&#xff1a;3.安装和删除&#xff1a;4.yum生态&#xff1a; 二.vim的使用&#xff1a;一.快速介绍一下vim二.vim正常模式&#xff1a;2-1&#xff1a;命令模式1.光标…

strtok函数详解:字符串【分割】的利器

目录 一&#xff0c;strtok函数简介 二&#xff0c;strtok函数的用法 三&#xff0c;strtok函数的注意事项 一&#xff0c;strtok函数简介 strtok函数可以帮助我们将一个字符串按照指定的分隔符进行分割&#xff0c;从而得到我们想要的子字符串。 &#x1f342;函数头文件&am…

【Qt绘制小猪】以建造者模式绘制小猪

效果 学以致用&#xff0c;使用设计模式之建造者模式绘制小猪。 代码 接口&#xff1a;申明绘制的步骤 PigBuilder.h #ifndef PIGBUILDER_H #define PIGBUILDER_H#include <QObject> #include <QPainter>class PigBuilder : public QObject {Q_OBJECT public:ex…

记录C# WinForm项目调用Rust生成的dll库

一、开发环境 1.RustRover (version&#xff1a;2023.3 EAP) 2.Visual Studio 2019 (version&#xff1a;16.11.30) 3.Windows 10 64位 OS 4.WinR&#xff1a;控制台程序&#xff0c;cmd.exe 二、使用RustRover编译Rust脚本为dll 1.下载安装Rust&#xff0c;https://www.…

Spark大数据应用实战

系列文章目录 送书第一期 《用户画像&#xff1a;平台构建与业务实践》 送书活动之抽奖工具的打造 《获取博客评论用户抽取幸运中奖者》 送书第二期 《Spring Cloud Alibaba核心技术与实战案例》 送书第三期 《深入浅出Java虚拟机》 送书第四期 《AI时代项目经理成长之道》 …

计算机丢失mfc100.dll如何恢复,详细解析mfc100.dll文件丢失解决方法

在计算机使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;比如“mfc100.dll丢失”。这是因为动态链接库&#xff08;DLL&#xff09;文件是Windows操作系统的重要组成部分&#xff0c;它们包含了许多程序运行所需的函数和数据。当这些DLL文件丢失或损坏时&#x…

Selenium爬取内容并存储至MySQL数据库

前面我通过一篇文章讲述了如何爬取博客摘要等信息。通常,在使用Selenium爬虫爬取数据后,需要存储在TXT文本中,但是这是很难进行数据处理和数据分析的。这篇文章主要讲述通过Selenium爬取我的个人博客信息,然后存储在数据库MySQL中,以便对数据进行分析,比如分析哪个时间段…

挑战100天 AI In LeetCode Day06(热题+面试经典150题)

挑战100天 AI In LeetCode Day06&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-82.1 题目2.2 题解 三、面试经典 150 题-83.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&am…

17.复制字符串 ,包括\0

#include<stdio.h> #include <cstring>int main(){int len1,len2;char s1[44];char s2[33];scanf("%s",s1);scanf("%s",s2);len1strlen(s1)1;printf("先s1的字符长度为&#xff1a;%d\n",len1) ;strcpy(s1,s2) ;printf("复制字…