WebSocket的理解与简单实现

// 创建WebSocket连接
let socket = new WebSocket("ws://localhost:8080");

// 连接建立时触发
socket.onopen = function() {
  console.log("WebSocket连接已建立");

  // 发送消息给服务器
  socket.send("这里发送你的请求数据");
};

// 接收到消息时触发
socket.onmessage = function(res) {
  console.log("接收到消息：" + res.data);

  // 关闭WebSocket连接
  socket.close();
};

socket.onerror = function(e) {
  console.error('WebSocket 连接出现错误：', e);
};

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

1、首先创建了一个WebSocket对象，并将其连接到指定的WebSocket服务器地址。

在建立连接时，会触发socket.onopen函数，你可以在这里发送请求。

在收到服务器发送的消息时，会触发socket.onmessage函数，你可以在这里处理接收到的消息进行渲染。

2、和轮询的区别

实时性：WebSocket提供了实时双向通信的能力，允许服务器主动推送数据给客户端，而不需要客户端不断发起请求。相比之下，轮询是通过客户端定期发送请求来获取最新数据，因此响应延迟较高，无法实现真正的实时通信。

效率：WebSocket在连接建立后使用长连接保持通信，而轮询每次请求都需要建立新的连接。这导致WebSocket比轮询更高效，因为它减少了请求和连接建立的开销，减少了网络流量。

资源消耗：轮询需要频繁地发送请求，即使没有新数据可用，也需要消耗网络带宽和服务器资源。而WebSocket使用长连接，只需要在有新数据时才发送数据，减少了不必要的资源消耗。

服务器推送：WebSocket允许服务器主动向客户端推送数据，而轮询只能在客户端主动发起请求时获取数据。这使得WebSocket更适合实时通信场景，如聊天应用、实时协作和实时数据更新。