WebSocket 是什么?WebSocket 前后端交互

news/2024/11/22 21:35:18/

WebSocket是什么?

WebSocket是一种在Web浏览器和服务器之间建立实时双向通信的技术。它不同于HTTP协议,因为HTTP是单向协议,只能客户端向服务器发送请求,服务器才能响应请求。而WebSocket可以实现双向通信,客户端和服务器可以随时互相发送消息,无需等待请求和响应。

WebSocket 协议是 HTML5 标准中的一部分,并在当前主流的浏览器和 Web 服务器中得到广泛支持。如今,大量的实时Web应用,如在线聊天、实时游戏、视频会议等都在使用 WebSocket 技术来实现低延迟、高效率和高可靠性的实时数据交换,而且相比其他技术(例如 Ajax 和长轮询),WebSocket 能够大幅降低网络带宽和服务器负载,提供更流畅的用户体验。

WebSocket协议的优势在于它可以使用标准的Web端口(HTTP的端口80和HTTPS的端口443),绕过大多数代理和防火墙限制。它也比传统的Ajax轮询和长轮询技术更快速、更具有响应性。

在WebSocket建立连接之前,它使用HTTP协议进行握手。客户端向服务器发送HTTP请求,并在请求头中包含一个特殊的标识符“Upgrade: websocket”,表示客户端希望升级协议到WebSocket。如果服务器支持WebSocket协议,它会响应一个状态码101 Switching Protocols,表示已成功升级协议,并开始使用WebSocket协议进行双向通信。

WebSocket使用一种基于帧的协议,在透明的TCP连接上提供了对双向通信的支持。这些帧通过二进制格式进行编码和解码,每个帧包含一些控制信息和实际的数据负载。

WebSocket优点

  1. 实时性:基于 WebSocket 协议的应用具有非常好的实时性,与HTTP协议相比能够更快地实现双向通信。

  2. 多协议:WebSocket 协议对底层传输协议并没有要求,它可以基于 TCP、UDP、SCTP 等协议,灵活性很高。

  3. 高效性:相较于轮询和 Comet 等技术,WebSocket协议可以降低数据交换的延迟,减少过多的头信息和降低网络带宽消耗率。

  4. 支持跨域:由于 WebSocket 是基于 TCP 协议的,较少受到同源策略限制,支持跨域使用。

  5. 减少服务端压力:相较于传统的 HTTP 请求,WebSocket 可以减少服务端的 CPU 和内存的开销,因为它的连接一旦建立就可以长期保持。

  6. 带有扩展特性:在协议的设计时,WebSocket 考虑的扩展特性比较多,例如可适应不同的压缩算法、消息编码方式等。

  7. 更好的二进制支持:在 WebSocket 中,字符串和二进制是等价的,非常方便处理二进制数据。

websocket的心跳机制和重连机制

        心跳机制:客户端每隔一段时间向服务端发送一个特有的心跳消息,每次服务端收到消息后只需将消息返回,此时,若二者还保持连接,则客户端就会收到消息,若没收到,则说明连接断开,此时,客户端就要主动重连,完成一个周期

        断线重连:若某时间段内客户端发送了消息,而服务端未返回,则认定为断线;这个时候会触发到websocket中的onclose事件,需要重新连接服务

WebSocket 入门(基本代码实现)

WebSocket通信一般分为前端与后端两个部分,具体如下:

前端部分:

        1、创建WebSocket对象:在前端代码中,可以使用JavaScript的WebSocket API来创建WebSocket对象。例如,可以使用以下代码来创建一个WebSocket对象并连接到服务器:

var socket = new WebSocket("ws://localhost:8080");

        2、发送数据:使用WebSocket对象的send()方法发送数据到服务器。例如,可以使用以下代码发送一条消息给服务器: 

socket.send("Hello, server!");

        3、接收数据:在WebSocket对象上添加一个监听器来接收服务器发送的消息。例如,可以使用以下代码来监听服务器发送的消息: 

socket.onmessage = function(event) {console.log("Received message: " + event.data);
};

后端部分:

  1. 创建WebSocket服务器:在后端代码中,可以使用各种编程语言和框架来创建WebSocket服务器。例如,使用Node.js和ws库可以很容易地创建WebSocket服务器。

  2. 处理连接请求:一旦建立了连接,服务器会收到一个连接请求。在服务器代码中,可以使用各种编程语言和框架来处理连接请求。例如,可以使用以下代码处理连接请求:

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });wss.on('connection', function(ws) {console.log("New connection");ws.on('message', function(message) {console.log("Received message: " + message);});
});

这段代码创建了一个WebSocket服务器,并在客户端建立连接时打印出一条消息。它还添加了一个监听器来接收客户端发送的消息。当服务器收到消息时,它将打印出该消息。 

以上是WebSocket前后端交互的基本流程,可以根据实际需求进行调整和扩展。


总的来说,WebSocket是一种非常有用的技术,可以用于构建实时通信的应用程序,例如聊天应用、在线游戏以及股票市场等实时数据监控工具。它可以提供更快的数据传输速度和更好的用户体验,且易于使用和实现。

 


http://www.ppmy.cn/news/149093.html

相关文章

快速排序中的下标问题

快速排序 https://www.acwing.com/problem/content/787/ 详细解释在这篇文章(https://blog.csdn.net/Joker15517/article/details/118330471)中&#xff0c;本文主要解释下标相关的问题 快速排序代码如下&#xff1a; #include <iostream> #include <cstring> #i…

xbox360手柄win10无法识别,显示未知设备

文章链接&#xff1a; https://tarantulo.lt/how-to/how-to-install-drivers-for-xbox-360-chinese-wireless-receiver/

ps4如何无线连接网络连接服务器,PC党最佳选择!达人发布PS4手柄无线连接PC教程...

近几年来&#xff0c;随着游戏手柄对PC平台的支持越来越完善&#xff0c;很多PC玩家都倾向于购买一支XBOX360手柄在PC上玩游戏。随着次世代的发售&#xff0c;索尼的PS4手柄添加了对PC的原生支持&#xff0c;微软的XBOXONE手柄最近发布PC驱动之后也已经完美支持PC&#xff0c;唯…

linux安装xbox无线手柄,win10系统如何连接xbox360无线手柄

xbox360无线手柄通过无线频率配对的方式与主机进行连接&#xff0c;可以让广大游戏玩家无需受线的牵绊&#xff0c;在任何无线接收到的范围内都可以玩游侠。不过很多网友不知道win10系统如何连接xbox360无线手柄&#xff0c;今天小编就教下大家win10系统连接xbox360无线手柄的方…

ROS与手柄控制

通过游戏手柄控制机器人&#xff08;ROS&#xff0c;Twist&#xff09; 使用Xbox360手柄控制你的turtlebot/rbx1/mrobot小车机器人 树莓派 与 Xbox360手柄 基于pygame 的一次邂逅 turtlebot入门-xbox360无线游戏杆控制turtlebot ROS探索总结&#xff08;九&#xff09;——…

解决windows 10 Pro无法识别罗技F710无线手柄的问题

友链 微信搜索我吃你家米了关注公众号 使用windows自带的设备管理器&#xff0c;找到罗技F710手柄&#xff0c;右键更新驱动程序&#xff0c;然后选择手动浏览&#xff0c;自己选择&#xff0c;最后选择xbox360外设就行了

ROS indigo 使用游戏手柄控制turtlebot2

参考链接&#xff1a;创客智造-xbox360无线游戏杆控制turtlebot 我使用的游戏手柄是 北通 阿修罗TE BTP-2185。 进入正题 1.安装手柄驱动 安装方法与Xbox360手柄驱动一样。 sudo apt-add-repository ppa:rael-gc/ubuntu-xboxdrv sudo apt-get update && sudo apt-ge…

Mac连接Xbox控制器(手柄)

问题背景解决方法总结 阅读之前注意&#xff1a; 本文阅读建议用时&#xff1a;3min 问题背景 在Mac上下载steam&#xff0c;结果打开游戏后&#xff0c;usb连接Xbox one控制器没有反应&#xff0c;北通的控制器也是一样。 解决方法 上述问题的原因应该是Mac缺少对应的驱动…