WebSocket一篇讲清楚

文章目录

    • WebSocket简介
    • WebSocket与HTTP的区别
    • WebSocket的工作原理
    • WebSocket的应用场景
    • WebSocket的使用
        • WebSocket 属性
        • WebSocket 事件
        • WebSocket 方法
    • WebSocket的心跳机制
    • WebSocket 的安全性和跨域问题如何处理?
    • 有哪些好用的客户端WebSocket第三方库
    • 总结

在这里插入图片描述

WebSocket简介

WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能,使得服务器可以主动向客户端推送数据,而不需要客户端发起请求。

WebSocket与HTTP的区别

与传统的HTTP协议相比,WebSocket具有以下几个显著的区别:

  • 双向通信:WebSocket支持客户端和服务器之间的实时双向通信,而HTTP协议是单向请求-响应模式。
  • 低延迟:由于WebSocket使用长连接,避免了HTTP的连接建立和断开过程,可以降低通信延迟。
  • 更少的数据传输:WebSocket头部信息相对较小,减少了数据传输的开销。
  • 跨域支持:WebSocket可以轻松跨域,而HTTP需要通过CORS等机制来实现。

WebSocket的工作原理

WebSocket的握手过程和HTTP有所不同。客户端通过发送特定的HTTP请求进行握手,服务器收到请求后进行验证,如果验证通过,则会建立WebSocket连接。

建立连接后,客户端和服务器之间可以通过WebSocket发送和接收消息,可以使用文本、二进制数据等进行通信。

WebSocket的应用场景

WebSocket的实时双向通信特性使得它在许多应用场景中发挥重要作用,例如:

  • 即时聊天:WebSocket可以实现实时的聊天功能,用户可以发送和接收消息,实现快速、低延迟的聊天体验。
  • 实时数据更新:对于需要实时更新数据的应用,如股票行情、实时监控等,WebSocket可以将数据实时推送给客户端,确保数据的及时更新。
  • 在线游戏:在线游戏需要实时的双向通信,WebSocket可以提供稳定的通信通道,支持实时交互和多人游戏。

WebSocket的使用

以下是使用JavaScript与WebSocket建立连接的示例代码:

var Socket = new WebSocket("url, [protocol]");

以上代码中的第一个参数url, 指定连接的 URL。第二个参数protocol是可选的,指定了可接受的子协议。

WebSocket 属性

以下是 WebSocket 对象的属性。

属性描述
Socket.readyState只读属性readyState表示连接状态,可以是以下值:0-表示连接尚未建立。1-表示连接已建立,可以进行通信。2-表示连接正在进行关闭。3-表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount只读属性bufferedAmount已被send()放入正在队列中等待传输,但是还没有发出的UTF-8文本字节数。
  • 0-表示连接尚未建立。
  • 1-表示连接已建立,可以进行通信。
  • 2-表示连接正在进行关闭。
  • 3-表示连接已经关闭或者连接不能打开。
WebSocket 事件

以下是 WebSocket 对象的相关事件。

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发
  • 下面是相关示例代码:
Socket.onopen = function() { 
    //连接建立时触发
    console.log("WebSocket连接已建立"); 
};

Socket.onmessage = function(event) {
    //客户端接收服务端数据时触发
    var message = event.data; 
    console.log("收到消息:" + message); 
};

Socket.onerror = function() {
    //通信发生错误时触发
    console.log("WebSocket连接发生了错误");
};

Socket.onclose = function() {
    //连接关闭时触发
    console.log("WebSocket连接已关闭");
};
WebSocket 方法

以下是 WebSocket 对象的相关方法。

方法描述
Socket.send()使用连接发送数据
Socket.close()关闭连接
//发送一条消息
Socket.send('你好')
//关闭WebSocket连接
Socket.close()

WebSocket 除了发送和接收文本消息外,还支持发送和接收二进制数据。对于发送二进制数据,可以使用 send() 方法传递一个 ArrayBufferBlob 对象,例如:

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint32(0, 1234);
socket.send(buffer);

在接收二进制数据时,可以通过 event.data 获取到 ArrayBuffer 对象,然后进行处理。

WebSocket的心跳机制

WebSocket的心跳机制是一种用于保持WebSocket连接的稳定性和活跃性的方法。心跳机制的目的是定期发送小的探测消息,以确保连接仍然有效,如果连接断开或出现问题,可以及时发现并采取措施。

下面是WebSocket心跳机制的详细步骤和相关代码示例:

定义心跳间隔:为了定期发送心跳消息,你需要定义一个心跳间隔,通常以毫秒为单位。在示例中,我们将心跳间隔设置为30秒。

 const heartbeatInterval = 30000; // 30秒

定义心跳消息:你需要定义用于发送心跳的消息内容。这通常是一个简单的字符串,如"heartbeat",但可以根据应用的需求自定义。

const heartbeatMessage = 'heartbeat';

设置心跳定时器:一旦WebSocket连接打开,你可以使用setInterval函数设置一个定时器,以便每隔一段时间发送心跳消息。

let heartbeat;

socket.addEventListener('open', () => {
    console.log('WebSocket连接已打开');

    heartbeat = setInterval(() => {
        socket.send(heartbeatMessage);
    }, heartbeatInterval);
});

处理心跳消息:当你接收到来自服务器的消息时,你需要检查它是否是心跳消息。这可以通过比较接收到的消息内容和心跳消息的内容来实现。

socket.addEventListener('message', (event) => {
    const message = event.data;

    if (message === heartbeatMessage) {
        console.log('接收到心跳消息');
        // 在这里可以执行一些处理心跳消息的操作
    } else {
        console.log('接收到其他消息:', message);
        // 处理其他类型的消息
    }
});

清除心跳定时器:当WebSocket连接关闭时,你应该清除之前设置的心跳定时器,以防止继续发送心跳消息。

socket.addEventListener('close', () => {
    console.log('WebSocket连接已关闭');

    clearInterval(heartbeat);
});

通过这些步骤,你可以实现WebSocket的心跳机制,确保连接的持续稳定,以适应长时间的通信需求。如果连接断开或出现问题,你可以根据需要添加进一步的错误处理机制。

WebSocket 的安全性和跨域问题如何处理?

WebSocket 支持通过 wss:// 前缀建立加密的安全连接,使用 TLS/SSL 加密通信,确保数据的安全性。在使用加密连接时,服务器需要配置相应的证书。

对于跨域问题,WebSocket 遵循同源策略,只能与同源的服务器建立连接。如果需要与不同域的服务器通信,可以使用 CORS(跨域资源共享)来进行跨域访问控制。

有哪些好用的客户端WebSocket第三方库

  1. Socket.io-client:Socket.io 是一个流行的实时通信库,它提供了客户端 JavaScript 库,可用于在浏览器中与 Socket.io 服务器建立 WebSocket 连接。它支持自动重连、事件处理等功能,用于构建实时应用非常方便。
  2. ReconnectingWebSocket:ReconnectingWebSocket 是一个带有自动重连功能的 WebSocket 客户端库,可以很好地处理网络连接断开和重新连接的情况,适合用于浏览器端的 WebSocket 开发。
  3. SockJS-client:SockJS 提供了一个浏览器端的 JavaScript 客户端库,用于与 SockJS 服务器建立连接。它可以在不支持 WebSocket 的浏览器上自动降级到其他传输方式,具有良好的兼容性。
  4. RxJS WebSocketSubject:RxJS 是一个流式编程库,它提供了 WebSocketSubject 类,可以将 WebSocket 转换为可观察对象,方便进行响应式编程。
  5. autobahn.js:autobahn.js 是一个用于实现 WebSocket 和 WAMP(Web Application Messaging Protocol)的客户端库,在浏览器中可以方便地使用它来与 WAMP 路由进行通信。

这些库都提供了良好的接口封装和功能特性,可以根据项目需求选择适合的库来进行浏览器端的 WebSocket 开发。

总结

WebSocket 协议是一种基于 TCP 的应用层协议,它提供了在客户端和服务器之间进行双向通信的能力。相比传统的 HTTP 协议,它具有更低的延迟和更高的实时性。

WebSocket 协议通过建立一条持久化的连接来实现双向通信,从而避免了 HTTP 协议中频繁建立和断开连接的过程,减少了网络开销和服务器的负担。客户端可以发送消息给服务器,服务器也可以发送消息给客户端,实现了真正的双向通信。

在使用 WebSocket 协议时,客户端和服务器会进行一次握手过程,以建立起 WebSocket 连接。握手过程中,客户端会发送一个 HTTP 请求,请求头中包含 Upgrade 和 Connection 字段,告诉服务器它希望升级到 WebSocket 连接。服务器收到请求后会返回一个 HTTP 响应,响应头中包含 Upgrade 和 Connection 字段,以及一个 Sec-WebSocket-Accept 字段,用于验证请求的合法性。握手成功后,客户端和服务器就可以开始使用 WebSocket 协议进行通信了。

WebSocket 协议支持二进制数据和文本数据的传输,开发者可以根据实际需求进行选择。同时,WebSocket 还提供了心跳机制、自动重连等功能,可以提高连接的稳定性和可靠性。

总之,WebSocket 协议在实时通信、游戏、在线聊天等场景中得到了广泛应用,它为 Web 应用提供了更加高效、可靠的双向通信方式。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年 Mathorcup高校数学建模竞赛(B题)| 甲骨文识别 | 特征提取,图像分割解析,小鹿学长带队指引全代码文章与思路

我是鹿鹿学长,就读于上海交通大学,截至目前已经帮200人完成了建模与思路的构建的处理了~ 本篇文章是鹿鹿学长经过深度思考,独辟蹊径,通过神经网络解决甲骨文识别问题。结合特征提取,图像分割等多元算法&…

如何在Windows通过固定tcp公网地址ssh远程访问本地Kali Linux

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 本文主要介绍如何在Kali系统编辑SSH配置文件并结合cpolar内网穿透软件,实现公网环境ssh远程连接本地kali系统。 1. 启…

科技云报道:大模型加持后,数字人“更像人”了吗?

科技云报道原创。 北京冬奥运AI 虚拟人手语主播、杭州亚运会数字人点火、新华社数字记者、数字航天员小诤…当随着越来越多数字人出现在人们生活中,整个数字人行业也朝着多元化且广泛的应用方向发展,快速拓展到不同行业、不同场景。 面向C端&#xff0…

appium

app元素抓取在线工具 Appium Inspector by Appium Pro appium安装(通过node.js安装) Python3Appium安装使用教程_python_脚本之家 Node version is 18.17.1

CST软件中变更求解器和宏的使用技巧【操作教程】

变更求解器 变更CST MWS中的Solver! Home > Simulation > Setup Solver CST Microwave Studio (CST MWS)总共有六个Solver。用户根据仿真目的和应用方向选择合适的Solver,才可以快速获得准确的结果。变更或选择Solver时,在Setup Sol…

DNS正反向解析

1.先连接X-shell 主服务器:192.168.32.168(server) 从服务器:192.168.32.169(node) 2.给主从服务器做准备工作 [rootserver ~]# setenforce 0 setenforce: SELinux is disabled [rootserver ~]# systemc…

盲盒App开发:探索未知惊喜,解锁潮流新玩法

在追求个性和独特体验的时代,盲盒文化以其独特的魅力,迅速占领了年轻人的心。为了满足这一市场需求,我们倾力打造了一款全新的盲盒App,带你开启一段充满未知与惊喜的探索之旅。 这款盲盒App融合了创新科技与潮流文化,…

Point-Nerf复现

Point-Nerf复现 0.0我自己的复现工程0.1相关库介绍0.1.1 pytorch0.1.2 h5py0.1.3 Scikit-Image0.1.4 imageio 0.2.复现简介0.3.参考链接 0.0我自己的复现工程 代码和安装包下载地址   所需库的安装包在package文件夹下,代码在code文件夹下,测试数据在…

FFmpeg: 简易ijkplayer播放器实现--05ijkplayer–连接UI界面和ffplay.c

文章目录 ijkplayer时序图消息循环--回调函数实现播放器播放时状态转换播放停止 ijkmediaPlay成员变量成员函数 ijkplayer时序图 stream_open: frame_queue_init packet_queue_init init_clock 创建read_thread线程 创建video_refresh_thread线程 消息循环–回调函数实现 ui …

003Node.js创建第一个web服务

如果用PHP来编写后端代码,需要用Apache或者Nginx的服务器,来处理客户的请求响应。对于Node.js时,不仅实现了应用,同时还实现了整个HTTP服务器. 安装 Node Snippets插件(编程自带提示) console.log(你好nodejs); //表…

PyCharm远程链接AutoDL

AutoDL使用方法: Step1:确认您安装的PyCharm是社区版还是专业版,只有专业版才支持远程开发功能。 Step2:开机实例 复制自己实例的SSH指令,比如:ssh -p 38076 rootregion-1.autodl.com 在ssh -p 38076 roo…

vue点击上传图片并实现图片预览功能,并实现多张图片放到一个数组中进行后端请求(使用原生input)

一、将 File 对象转成 BASE64 字符串 &#xff08;FileReader&#xff09; <template><div><!-- 用来显示封面的图片 --><!-- <img src"/assets/images/cover.jpg" alt"" class"cover-img" ref"imgRef" />…

创新实训2024.04.11日志:self-instruct生成指令

1. 参考文献 代码&#xff1a;https://github.com/yizhongw/self-instruct论文&#xff1a;https://arxiv.org/abs/2212.10560 2. 前沿论文阅读 2.1. self-instruct技术的优势 作者在文章中提到&#xff1a; The recent NLP literature has witnessed a tremendous amount …

python基础——python包【创建和导入,下载第三方包】

&#x1f4dd;前言&#xff1a; 在上一篇文章python基础——模块中&#xff0c;我们讲解了有关python模块的相关知识&#xff0c;这篇文章我们进一步讲解用于储存多个模块文件的python包&#xff1a; 1&#xff0c;什么是python包 2&#xff0c;如何创建和导入python包 3&#…

linux安装dubboAdmin

1.环境准备&#xff1a; jdk-8u391-linux-x64apache-maven-3.9.6apache-tomcat-8.5.100 2.安装注册中心zookeeper zookeeper的安装看我的另一篇文章&#xff0c;安装完成后保持启动状态 linux安装Zookeeper的详细步骤-CSDN博客 3.安装dubboadmin 源码下载地址&#xff1a;R…

Python学习从0开始——项目一day01爬虫(二)

Python学习从0开始——项目一day01爬虫&#xff08;二&#xff09; 一、解析response数据二、json转换三、文件保存四、存储json对象五、完整代码 上一篇 一、解析response数据 在已经知道我们获取图片的最终URL存在于请求响应response中&#xff0c;下一步的重点就放在解析re…

SQLite数据库文件格式(十五)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite 4.9的虚拟表机制(十四) 下一篇&#xff1a;SQLite超详细的编译时选项&#xff08;十六&#xff09; ► 目录 本文档描述和定义磁盘上的数据库文件 自 SQLite 以来所有版本使用的格式 版本 3.0.0 &#xff08;2004-06-18…

Java数据结构二叉树

概念 一棵二叉树是结点的一个有限集合&#xff0c;该集合&#xff1a; 1. 或者为空 2. 或者是由一个根节点加上两棵别称为左子树和右子树的二叉树组成。 从上图可以看出&#xff1a; 1. 二叉树不存在度大于2的结点 2. 二叉树的子树有左右之分&#xff0c;次序不能颠倒&#x…

设计模式代码实战-抽象工厂模式

1、问题描述 小明家新开了两个工厂用来生产家具&#xff0c;一个生产现代风格的沙发和椅子&#xff0c;一个生产古典风格的沙发和椅子&#xff0c;现在工厂收到了一笔订单&#xff0c;请你帮他设计一个系统&#xff0c;描述订单需要生产家具的信息。 输入试例&#xff1a; 3 …

2024-04-10 作业

作业要求&#xff1a; 1> 思维导图 2> 作业1&#xff1a; 作业2&#xff1a; 运行代码&#xff1a; main.cpp #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QTimerEvent> #include <QTime> #include &l…