webSocket

胆大如牛白展堂
105 阅读8分钟

Websocket

简介

Websocket是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，用于在Web浏览器和服务器之间进行任意的双向数据传输。WebSocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。

WebSocket目前支持两种统一资源标志符ws和wss，类似于HTTP和HTTPS。

实现

浏览器发出webSocket的连线请求（http请求），服务器发出响应，这个过程称为握手,握手的过程只需要一次，就可以实现持久连接。

请求头：在请求头中的connection和upgrade字段中带上要求升级为webscoket的请求。

响应头：服务器会回答这次请求如果不是101状态码，表示握手升级的过程失败了 101是Switching Protocols,表示服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送这个响应后的空档，将http升级到webSocket。

image.png

API

创建Websocket对象

var ws = new WebSocket('ws://echo.websocket.org');

生命周期

事件调用方式触发时间
openws.onopen = fun(绑定的回调)连接建立时触发
messagews.onmessage = fun(绑定的回调)客户端接收数据时触发
errorws.onerror = fun(绑定的回调)通信发生错误时触发
closews.onclose = fun(绑定的回调)连接关闭时触发

注： 如果要绑定多个回调时，用事件监听器

ws.addEventListener("message", function(event) { var data = event.data; });

接收服务器传过来的数据（message事件的回调的参数）

ws.onmessage = function(evt) { console.log( evt.data); };

向服务器请求的事件

// 传送数据的格式必须为JSON字符串
ws.send("Hello WebSockets!");

关闭此次通信的事件

ws.close();

使用

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 

ws.onerror = function(evt) {
  console.log("error!!!"); 
};

websocket和http的区别和特点

一、HTTP

HTTP全称是“超文本传输协议”（Hypertext Transfer Protocol），是Web应用程序最为广泛使用的协议之一。它建立在TCP协议之上，通过请求-响应模式来传输数据。在HTTP中，客户端发送一个请求到服务器，服务器接收到请求后，返回相应的响应。这个过程通常涉及到以下步骤：

  1. 客户端向服务器发送请求报文，报文中包含了请求方法、请求URL、请求头和请求体等信息。
  2. 服务器接收到请求后，进行处理并返回响应报文，响应报文中包含了状态码、响应头和响应体等信息。
  3. 客户端接收到响应后，对响应进行解析并进行相应的操作。

HTTP是一种无状态协议，每个请求-响应周期都是独立的。这意味着服务器不能维护客户端的状态信息，每次请求都需要重新验证身份和权限等信息。为了解决这个问题，HTTP引入了cookie和session机制，通过在客户端和服务器之间传递状态信息来实现持久化状态。

HTTP的特点包括但不限于以下几点：

  1. 请求-响应模式，每个请求都是独立的。
  2. 无状态协议，服务器不能维护客户端的状态信息。
  3. 基于文本协议，易于理解和调试。
  4. 使用明文传输数据，安全性较低。
  5. 适用于请求-响应式的Web应用程序。

二、WebSocket的特点

  1. 实时通信协议，允许双向通信。
  2. 建立在HTTP协议之上，通过握手协议来建立连接。
  3. 使用二进制协议传输数据，速度更快。
  4. 支持跨域通信。
  5. 支持服务器推送数据

三、WebSocket和HTTP的区别

虽然WebSocket和HTTP都可以在客户端和服务器之间传输数据，但它们之间有一些本质的不同。

1. 建立连接的方式不同

在HTTP中，每次请求都需要重新建立连接。这意味着，当一个Web页面需要不断地向服务器发送请求时，每次请求都需要重新建立连接，这会导致连接开销和网络延迟。而在WebSocket中，客户端和服务器之间只需要建立一次连接，之后就可以保持连接状态并进行双向通信。

2. 数据传输方式不同

在HTTP中，数据的传输是通过请求-响应模式进行的。客户端发送请求，服务器返回响应。在这个过程中，客户端和服务器之间的通信都是通过文本进行的。而在WebSocket中，客户端和服务器之间的通信是以二进制形式进行的。这意味着，WebSocket可以更快地传输数据，并且能够处理更复杂的数据类型。

3. 支持的数据类型不同

在HTTP中，支持的数据类型是有限的。通常只支持文本、图像和音频等静态数据类型。而在WebSocket中，由于数据传输是以二进制形式进行的，因此可以支持更复杂的数据类型，例如视频流和实时游戏数据等。

4. 安全性不同

在HTTP中，数据是以明文形式进行传输的，因此容易被窃取或篡改。为了解决这个问题，HTTPS被引入。而在WebSocket中，数据是以二进制形式进行传输的，因此安全性更高，不容易被窃取或篡改。

5. 实时性不同

由于HTTP的请求-响应模式，客户端只能在收到服务器响应后才能更新数据。这意味着，在实时性要求较高的应用中，HTTP可能无法满足需求。而WebSocket可以实现实时的双向通信，因此在实时性要求较高的应用中更为适用。

四、结论

WebSocket和HTTP都是应用层协议，用于在客户端和服务器之间传输数据。它们之间有一些本质的不同，包括建立连接的方式、数据传输方式、支持的数据类型、安全性和实时性等。在实际应用中，我们需要根据具体的需求选择适合的协议，以实现最佳的数据传输效果。

webscoket和轮询

轮询和websocket的区别：

  1. 轮询是传统的方式，不存在浏览器兼容性问题，定时的发送网络请求
  2. 轮询对客户端的电脑资源会造成额外的开销，如果页面中的定时器过多时不能实时获取最新的数据，获取数据会有延迟
  3. websocket他对浏览器的版本有要求，低版本的浏览器不一定能用
  4. websocket可以实时获取最新的数据，不会产生额外的开销。服务器有新的数据之后，会主动推送给客户端
  5. 轮询是定时的发送ajax请求，获取服务器的数据
  6. 在现阶段如果可以，建议使用websocket

长轮询的利与弊：

优点

  • 长轮询是在 XMLHttpRequest 之后实现的，它几乎得到了设备的普遍支持，因此通常很少需要有进一步的备选方案。但是，在必须处理异常的情况下，或者在服务器可查询新数据但不支持长轮询（更不用说其他更现代的技术标准）的情况下，基本轮询有时仍然有些用处，并且可以使用 XMLHttpRequest 或通过 JSONP 利用简单的 HTML 脚本标签。

缺点

  • 长轮询大量占据服务器资源。
  • 可靠的消息排序 可能是长轮询的一个问题，因为来自同一个客户端的多个 HTTP 请求可能同时运行。举个例子，如果一个客户端打开两个浏览器选项卡，使用相同的服务器资源，并且客户端应用程序正在将数据持久化到本地存储区（如 localStorage 或 IndexedDb），则无法保证重复数据不会被多次写入。
  • 根据服务端实现的不同，一个客户端对消息的确认接收也可能导致另一个客户端根本不会收到预期的消息，因为服务端可能错误地认为客户端已经收到了它所期望的数据。

WebSockets 的利与弊

优点

  • WebSockets 保持一个唯一的连接打开，同时消除长轮询的延迟问题。
  • WebSockets 通常不使用 XMLHttpRequest，因此，当我们每次需要从服务器获取更多的信息时，无需发送头部数据。反过来说，这又减少了数据发送到服务器时需要付出的高昂的数据负载代价。

缺点

  • 当连接终止时，WebSockets 无法自动恢复连接 —— 这是需要你自己实现的部分，也是导致存在许多 客户端库 的原因。
  • 早于 2011 年的浏览器无法支持 WebSocket 连接 —— 但这一点越来越无关紧要。
avatar
文章
阅读
粉丝