webSocket网页通信---使用js模拟多页面实时通信

webSocket是什么

        WebSocket是一种先进的网络技术,它提供了一种在单个TCP连接上进行全双工通信的能力。传统的基于HTTP的通信是单向的,即客户端发起请求,服务器响应请求,然后连接关闭。但是,WebSocket允许服务器和客户端之间建立长时间的连接,双方可以通过该连接进行双向数据传输,而不需要客户端重新发起HTTP请求。

主要特点和优势:

  1. 全双工通信:WebSocket允许服务器和客户端之间实时、双向的数据传输,使得实时性要求较高的应用(如聊天应用、在线游戏等)可以更高效地工作。

  2. 低延迟:相比传统的HTTP轮询方式,WebSocket可以减少通信的延迟,因为不需要在每次通信中都重新建立连接。

  3. 更少的通信开销:由于WebSocket在连接建立后可以保持打开状态,不需要在每次通信中发送HTTP头部信息,从而减少了通信开销。

  4. 跨域支持:与HTTP不同,WebSocket可以跨域进行通信,这意味着可以在不同域名的服务器之间建立WebSocket连接。

  5. 安全性:WebSocket可以通过TLS/SSL进行加密,确保数据传输的安全性。

使用场景:

  • 实时聊天应用:WebSocket使得聊天应用程序能够实时地发送消息并接收响应,而无需轮询服务器。

  • 在线游戏:多人在线游戏通常需要实时的双向通信,WebSocket能够提供这种功能,以支持游戏状态同步和实时动作响应。

  • 实时数据更新:例如股票市场报价、天气预报等需要实时更新的应用可以使用WebSocket来推送数据。

  • 协作应用:多人协作编辑、协同绘图等需要多方实时互动的应用可以受益于WebSocket的实时通信能力。

        总结来说,WebSocket是一种强大的通信协议,它可以长时间保持连接状态,只需要验证一次信息就可以长时间多次的交换信息

webSocket的工作流程

        在页面中使用webSocket连接到服务器,服务器验证后开启连接,此时页面和服务器之间可以随意发送信息,同时,服务器可以和多个页面同时连接,这表示它可以实现广播效果,将数据发送给所有页面,

以上是webSocket的页面和服务端连接,和多个页面的通信模型

 webSocket对象

 WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API

WebSocket构造函数

WebSocket(url[, protocols])
// 返回一个 WebSocket 对象。url 
通信的服务地址protocols 可选
一个协议字符串或者一个包含协议字符串的数组。

 WebSocket常量

 

 WebSocket实例属性

  • WebSocket.binaryType      使用二进制的数据类型连接。
  • WebSocket.bufferedAmount 只读       未发送至服务器的字节数。
  • WebSocket.extensions 只读        服务器选择的扩展。
  • WebSocket.onclose        用于指定连接关闭后的回调函数。
  • WebSocket.onerror      用于指定连接失败后的回调函数。
  • WebSocket.onmessage        用于指定当从服务器接受到信息时的回调函数。
  • WebSocket.onopen        用于指定连接成功后的回调函数。
  • WebSocket.protocol 只读       服务器选择的下属协议。
  • WebSocket.readyState 只读     当前的链接状态。
  • WebSocket.url 只读        WebSocket 的绝对路径。

主要的方法

关闭连接

WebSocket.close(code,reason);code 可选
一个数字状态码,它解释了连接关闭的原因。如果没有传这个参数,默认使用 1005,状态码不能小于1000reason 可选
一个人类可读的字符串,它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

 

发送数据

WebSocket.send(data);data : 用于传输至服务器的数据。

 data必须是以下类型之一:

String
        文本字符串。字符串将以 UTF-8 格式添加到缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。

ArrayBuffer
        你可以使用类型化数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,bufferedAmount 将加上所需字节数的值。

Blob
        Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。

ArrayBufferView
        你可以以二进制帧的形式发送任何 JavaScript 类数组对象 ;其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。

也就是说只能传输,字符串和二进制文件数据,有关二进制文件类型可以参考:

js二进制数据,文件---ArrayBuffer,二进制数组_js arraybuffer()-CSDN博客

js二进制数据,文件---blob对象_js 输出 blob-CSDN博客

主要事件

一共有 4 个事件:

  • open —— 连接已建立,
  • message —— 接收到数据,
  • error —— WebSocket 错误,
  • close —— 连接已关闭。

当链接状态改变时,会触发对应的事件

使用nodejs本地服务模拟webSocket服务,实现页面实时通信

新建3个文件,

index.html : 通信的页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><textarea name="" cols="30" rows="10" id="text"></textarea><input type="file" name="" id="file"><script></script><script src="webSocket.js"></script>
</body>
</html>

webSocket.js:页面通信的逻辑

const socket = new WebSocket('ws://localhost:5000');
const text = document.getElementById('text');
const file = document.getElementById('file');file.onchange = (e) => {const file = e.target.files[0];const blob = new Blob([file], { type: 'image/jpeg' });socket.send(blob);
}window.onkeydown = (e) => {// console.log(e.keyCode)if (e.keyCode === 13) {//回车e.preventDefault();if (socket.readyState === WebSocket.OPEN) {socket.send(text.value);}}
}
socket.onopen = function (event) {console.log(socket);console.log('连接到服务器');socket.send('Hello, 服务器!');
}socket.onmessage = function (event) {// console.log(event)console.log('收到消息: ', event.data);let p = document.createElement('p');p.innerText = event.data;document.body.appendChild(p);}socket.onclose = function (event) {console.log('连接已关闭');
}

server.js:启动本地webSocket服务

实现webSocket本地服务需要先安装ws包

npm install ws
// 启动一个支持websocket的nodejs服务
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 5000 });wss.on('connection', function (ws) {ws.on('message', function (message) {// 广播消息到所有客户端,除开发送端wswss.clients.forEach(function (client) {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send("来自其他页面的消息:"+message);}});console.log('received: %s', message);ws.send('服务器收到消息:' + message);});ws.send('你已连接到WebSocket服务器');
});console.log('WebSocket服务正在监听5000端口 http://localhost:5000...');

结果展示

先启动server.js :

node server.js

然后打开两个页面

在文本框中输入文字,按下回车发送到server.js本地服务,之后server.js会广播给其他连接的页面,(这里我将广播给其他页面的信息也发送给了原页面)

服务器收到消息 是本页面发送的内容,来自其他页面的消息 是其他页面发送的内容

这样就实现了两个页面的实时通信

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

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

相关文章

欧盟,又出了新规-通用充电器新规通用充電器的 RED 修正案如何办理?

欧盟&#xff0c;又出了新规-通用充电器新规通用充電器的 RED 修正案如何办理&#xff1f; 欧盟新规委员会发布《通用充电器指令》指南通用充電器的 RED 修正案办理流程&#xff1a; 2024年5月7日&#xff0c;欧盟委员会发布《通用充电器指令》指南&#xff0c;修订了《无线…

Linux之进程控制(下)

目录 进程替换的概念 进程替换的函数 execl​编辑 execlp execle execv execvp execve 上期&#xff0c;我们学习了进程创建&#xff0c;进程终止和进程等待&#xff0c;今天我们要学习的是进程控制中相对重要的板块------进程替换。 进程替换的概念 在进程创建时&…

【 香橙派 AIpro评测】大语言模型实战教程:香橙派 AIpro部署LLMS大模型实站(保姆级教学)

引言 OrangePi AIpro 这块板子作为业界首款基于昇腾深度研发的AI开发板&#xff0c;一经发布本博主就火速去关注了&#xff0c;其配备的 8/20TOPS澎湃算力是目前开发板市场中所具备的最大算力&#xff0c;可谓是让我非常眼馋啊&#xff01;这么好的板子那必须拿来用用&#xff…

LeetCode热题100刷题6:160. 相交链表、206. 反转链表、234. 回文链表、141. 环形链表、142. 环形链表 II

160. 相交链表 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) : val(x), next(NULL) {}* };*/ class Solution { public:ListNode *getIntersectionNode(ListNode *headA, ListNode *headB) {ListNode…

QDockWidget类详解

一.QDockWidget类概述 1.QDockWidget类 QDockWidget类提供了一个特殊的窗口部件&#xff0c;它可以是被锁在QMainWindow窗口内部或者是作为顶级窗口悬浮在桌面上。 QDockWidget类提供了dock widget的概念&#xff0c;dock widget也就是我们熟悉的工具面板或者是工具窗口。Do…

nginx转发的问题

我在项目配置的时候遇到一个问题&#xff1a; 配置了域名转发&#xff0c;且配置了https nginx配置如下&#xff1a; server {listen 443 ssl;server_name yourdomain.com;ssl_certificate /path/to/your/certificate.crt;ssl_certificate_key /path/to/your/private.key;loca…

10.SQL注入-http header利用案例

SQL注入-http header利用案例 首先通过登录http头界面,如图所示:登录的信息会被记录到数据库中去&#xff0c;同时使用bp进行抓包分析 将抓包的数据发送repeater里面进行调试 通过useragent进行注入 将useragent对应的数据信息删除掉,输入单引号测试被后台执行报错sql语法…

【Python机器学习】模型评估与改进——带交叉验证的网格搜索

虽然将数据划分为训练集、验证集、测试集的方法是可行的&#xff0c;也相对常用&#xff0c;但这种方法对数据的划分相当敏感&#xff0c;为了得到对泛化性能的更好估计&#xff0c;我们可以使用交叉验证来评估每种参数组合的性能&#xff0c;而不是仅将数据单次划分为训练集与…

为什么要在成像应用中使用图像采集卡?

达到最大产量是工业和工厂自动化的关键标准之一。提高传感器分辨率和帧速率有助于实现这一目标&#xff0c;但也使带宽达到极限&#xff0c;并提出了新的传输问题。当前高带宽接口(如10GigE、相机直接与PC连接和嵌入式系统)的实现促使成像应用的许多用户询问如何以最佳配置最优…

vue3进阶,渲染函数使用

目录 渲染函数使用场景 h() 渲染函数 渲染函数基础写法 渲染函数的组件传参&#xff0c;事件传递 渲染函数的插槽使用 结语 渲染函数使用场景 在写这篇文章之前&#xff0c;我会先简单说一下渲染函数&#xff0c;并且我会在第一个渲染函数的介绍中&#xff0c;标名渲染函数…

[Go 微服务] Kratos 验证码业务

文章目录 1.环境准备2.验证码服务2.1 kratos 初始化验证码服务项目2.2 使用 Protobuf 定义验证码生成接口2.3 业务逻辑代码实现 1.环境准备 protoc和protoc-gen-go插件安装和kratos工具安装 protoc下载 下载二进制文件&#xff1a;https://github.com/protocolbuffers/protobu…

探索智慧校园人事系统:社会关系管理功能全解析

智慧校园人事系统中的社会关系管理模块&#xff0c;旨在通过数字化手段&#xff0c;高效、安全地记录与管理教职工的社会联系信息&#xff0c;包括但不限于家庭成员、紧急联系人、学术合作关系、社会兼职等&#xff0c;旨在促进学校对教职工个人生活关怀及职业网络拓展的理解和…

四、(2)获取数据(补充urllib)(爬虫及数据可视化)

四、&#xff08;2&#xff09;获取数据&#xff08;补充urllib&#xff09;&#xff08;爬虫及数据可视化&#xff09; urllibget请求post请求User-AgentResponse模拟真实信息在豆瓣spider中真实实现 urllib 此处的扩展&#xff0c;可以进行在主体的程序学习完成后&#xff0…

【数据结构】04.双向链表

一、双向链表的结构 注意&#xff1a;这里的“带头”跟前面我们说的“头节点”是两个概念&#xff0c;带头链表里的头节点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位节点不存储任何有效元素&#xff0c;只是站在这里“放哨的”。 “哨兵位”存在的意义&#xff1a;遍历循…

Roboflow自动标定数据集

最近需要自己打数据集&#xff0c;记录一下用Roboflow来打标签。 https://roboflow.com/&#xff08;官网&#xff09; 进入官网先注册&#xff0c;注册完成后进入这个界面。 我先讲如果不想让数据集公开怎么办&#xff0c;因为这里每个新建的都是公开的。新账号进去应该进去…

【数据分享】国家级旅游休闲街区数据(Excel/Shp格式/免费获取)

之前我们分享过从我国文化和旅游部官网整理的2018-2023年我国50个重点旅游城市星级饭店季度经营状况数据&#xff08;可查看之前的文章获悉详情&#xff09;&#xff01;文化和旅游部官网上也分享有很多与旅游相关的常用数据&#xff0c;我们基于官网发布的名单文件整理得到全国…

Qt Creator13配置Android开发环境

QT Creator13是目前&#xff08;2024年&#xff09;最新版本&#xff0c;配置Android开发环境有一些不一样&#xff0c;走了一些弯路&#xff0c;记录如下。 1、安装JDK和SDK 下载安装JDK和SDK&#xff0c;建议安装在无空格和中文字符的目录下。 具体安装步骤不再赘述&#…

GraalVM

文章目录 1、什么是GraalVM2、GraalVM的两种模式1_JIT模式2_AOT模式3_总结 3、应用场景1_SpringBoot搭建GraalVM应用2_函数计算3_Serverless应用 4、参数优化和故障诊断1_内存快照文件的获取2_运行时数据的获取 1、什么是GraalVM GraalVM是Oracle官方推出的一款高性能JDK&…

如何改善提示词,让 GPT-4 更高效准确地把视频内容整体转换成文章?

&#xff08;注&#xff1a;本文为小报童精选文章。已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09; 让我们来讨论一下大语言模型应用中的一个重要原则 ——「欲速则不达」。 作为一个自认为懒惰的人&#xff0c;我一直有一个愿望&#xff1a;完成视频制作…

Spire.PDF for .NET【文档操作】演示:以特定的缩放比例/百分比打开 PDF 文件

有时&#xff0c;我们可能需要在显示 PDF 文件时更改缩放比例以满足我们的要求。在本文中&#xff0c;我们将演示如何使用 Spire.PDF for .NET 以特定的缩放比例/百分比&#xff08;例如默认值、100% 或任何其他所需的缩放比例&#xff09;打开 PDF 文件。 Spire.PDF for .NET…