WebSocket一篇讲清楚

2024-04-12 16:12
文章标签 websocket 一篇 讲清楚

本文主要是介绍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 应用提供了更加高效、可靠的双向通信方式。

这篇关于WebSocket一篇讲清楚的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/897618

相关文章

Java Websocket实例【服务端与客户端实现全双工通讯】

Java Websocket实例【服务端与客户端实现全双工通讯】 现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发 出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏 览器需要不断的向服务器发出请求,然而HTTP

CSP-J基础之数学基础 初等数论 一篇搞懂(一)

文章目录 前言声明初等数论是什么初等数论历史1. **古代时期**2. **中世纪时期**3. **文艺复兴与近代**4. **现代时期** 整数的整除性约数什么样的整数除什么样的整数才能得到整数?条件:举例说明:一般化: 判断两个数能否被整除 因数与倍数质数与复合数使用开根号法判定质数哥德巴赫猜想最大公因数与辗转相除法计算最大公因数的常用方法:举几个例子:例子 1: 计算 12 和 18

CSP-J基础之数学基础 初等数论 一篇搞懂(二)

文章目录 前言算术基本定理简介什么是质数?举个简单例子:重要的结论:算术基本定理公式解释:举例: 算术基本定理的求法如何找出质因数:举个简单的例子: 重要的步骤:C++实现 同余举个例子:同余的性质简介1. 同余的自反性2. 同余的对称性3. 同余的传递性4. 同余的加法性质5. 同余的乘法性质 推论 总结 前言 在计算机科学和数学中,初等数论是一个重要的基础领域,涉及到整数

【Linux】萌新看过来!一篇文章带你走进Linux世界

🚀个人主页:奋斗的小羊 🚀所属专栏:Linux 很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~ 目录 前言💥1、初识Linux💥1.1 什么是操作系统?💥1.2 各种操作系统对比💥1.3 现代Linux应用💥1.4 Linux常用版本 💥2、Linux 和 Windows 目录结构对比💥2.1 文件系统组织方式💥2.2

springboot websocket 服务端

在Spring Boot中使用WebSocket实现服务端和Java客户端的实时通信,可以分为几个步骤来完成。这里将详细介绍服务端和Java客户端的具体实现。 服务端设置 添加依赖: 在pom.xml文件中添加Spring WebSocket的依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spr

AI产品经理:ai产品经理从零基础到精通,非常详细收藏我这一篇就够了

在互联网的浪潮中,AI人工智能领域无疑是最引人注目的风口。AI产品经理,作为这一领域的新兴岗位,以其高薪、低压力、无年龄限制等优势,吸引了众多互联网从业者的目光。随着GPT等AIGC工具的兴起,AI产品经理的市场需求日益增长。 AI产品经理需不需要懂算法?🤔‍‍‍ AI产品经理不必像算法工程师那样精通算法,但必须能够与算法工程师有效沟通,了解如何管理AI项目,协调项目资源。 成功转行AI产

Spring boot 项目作为客户端调用 服务端websocket

文章目录 java客户端请求websocketSpring boot 导入包客户端调用方法测试执行方法connectWebSocketHandshakeMessagesendHandshakeWebSocketConfig.queue.take方法对应实体类配置 yaml 资源WebSocketConfig 配置类注入配置websocketUrl:LinkedBlockingQueueLin

WebSocket+Spring boot 构建一个完整消息服务

1、添加依赖 compile project(":faas-spring-boot-starter-data-websocket") 2、定义WebSocketHandler Socket 服务入口(Header接收 jwt-token 同应用登录的Token(直接解决鉴权问题),然后定义请求的自定义参数,方便后续消息推送、支持群发、私发、模糊匹配) @Component@WebSock

spring-websocket基于stomp实现websocket

目录 概述 后端代码 拦截器 HandshakeInterceptor拦截器 ChannelInterceptor拦截器   消息转换器  配置类  消息处理 广播模式   用户模式 自定义请求头 用户信息  ChannelInterceptor拦截器设置用户信息  DefaultHandshakeHandler的继承类中设置用户对象 前端代码 概述

Nodejs 串口通信 : websocket , serialport

最近在学习如何实现web页面和串口间通信,网页请求使用websocket,实现的基本功能如下: 1、基本需求:硬件:有两个信号灯(TLA-505-1T),一个485继电器(开关),电压转换器,工业触屏一体机。 2、原理图:                  3工作原理: 首先一体机中采用node开发服务器,网页请求采用websocket协议,直接放代码了: var express