WebSocket 前端实现和服务器及时、双向通讯

一、WebSocket简介

1.  WebSocket是什么

   WebSocket是一种协议，用于在Web应用程序和服务器之间创建及时、双向的通讯连接。它通过一个单一的TCP连接提供了长期化连接，这使得Web应用程序可以更加及时地传递数据。WebSocket协议最初由W3C开发，并于2011年成为标准。
 2.  WebSocket的优缺点

优势：

• 及时性 ：由于WebSocket的长期化连接，它可以实现及时的数据传输，避免了Web应用程序需要不断地发送请求以获取最新数据的环境。
  
• 双向通讯： WebSocket协议支持双向通讯，这意味着服务器可以自动向客户端发送数据，而不需要客户端发送请求。
  
• 减少网络负载： 由于WebSocket的长期化连接，它可以减少HTTP请求的数量，从而减少了网络负载。
  

劣势：

• 需要浏览器和服务器都支持： WebSocket是一种相对新的技能，需要浏览器和服务器都支持。一些旧的浏览器和服务器可能不支持WebSocket。
  
• 需要额外的开销： WebSocket需要在服务器上维护长时间的连接，这需要额外的开销，包括内存和CPU。
  
• 安全问题： 由于WebSocket允许服务器自动向客户端发送数据，可能会存在安全问题。服务器必须包管只向合法的客户端发送数据。
  

3. WebSocket的生命周期

WebSocket 生命周期描述了 WebSocket 连接从创建到关闭的过程。一个 WebSocket 连接包含以下四个重要阶段：

• 连接创建阶段（Connection Establishment）： 在这个阶段，客户端和服务器之间的 WebSocket 连接被创建。客户端发送一个 WebSocket 握手请求，服务器响应一个握手响应，然后连接就被创建了。
  
• 连接开放阶段（Connection Open）： 在这个阶段，WebSocket 连接已经创建并开放，客户端和服务器可以在连接上相互发送数据。
  
• 连接关闭阶段（Connection Closing）： 在这个阶段，一个 WebSocket 连接即将被关闭。它可以被客户端或服务器发起，通过发送一个关闭帧来关闭连接。
  
• 连接关闭完成阶段（Connection Closed）： 在这个阶段，WebSocket 连接已经完全关闭。客户端和服务器之间的任何交互都将无效
  

   注： WebSocket 连接在任何时候都可能关闭，例如网络故障、服务器瓦解等环境都可能导致连接关闭。因此，需要及时处理 WebSocket 连接关闭的变乱，以确保应用程序的可靠性和稳定性 
  4. WebSocket的API

WebSocket API 是用于在 Web 应用程序中创建和管理 WebSocket 连接的接口集合。WebSocket API 由浏览器原生支持，无需利用额外的 JavaScript 库或框架，可以直接在 JavaScript 中利用。
下面直接以一个demo的形式来利用常用的API，并加以备注说明

1. // 1、建立连接
2. let ws = new WebSocket("ws://192.168.2.10:8000/ws");  // 括号内填写自己需连接的服务端地址
4. // 2、判断连接是否建立
5. ws.onopen = function () {
6.   console.log("WebSocket 连接已经建立。");
8. // 3、 ws.send 可以向服务端发送信息
9.   ws.send("{'action': 1,'msgId':" + Date.now() + "}");
11. // 4、可以写个定时器来进行心跳保持，以防断连
12.   setInterval(function () {
13.     console.log("这段代码每隔260秒执行一次");
14.     ws.send("{'action': 2,'msgId':" + Date.now() + "}");
15.   }, 260000);
16. };
18. // 5、接收服务器消息，接收到数据可以在这里面写事件
19. ws.onmessage = function (event) {
20.   console.log("收到服务器消息：", event.data);
22.   let data = JSON.parse(event.data);  // 这里我接收的是json字符串，所以进行了转换数据
23.   console.log(data);
24. };
25. // 6、连接错误抛出
26. ws.onerror = function (event) {
27.   console.error("WebSocket 连接出现错误：", event);
28. };
29. // 7、 连接关闭
30. ws.onclose = function () {
31.   console.log("WebSocket 连接已经关闭。");
32. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。