利用WebSocket技术实现实时通信

参考博客：即时通信的方法和webSocket的具体使用_### 目前可实现实时通信的方式-CSDN博客

先简单介绍一下WebSocket之前实现即时通信的方法：

1. 轮询（Polling）： 客户端定时向服务器发送请求
2. 长轮询（Long Polling）：客户端发送请求后，保持连接打开，等待新数据响应后再关闭连接
3. Comet：保持长连接，在返回请求后继续保持链接打开

WebSocket是一种在单个TCP连接上进行全双工通信的协议。

为什么不用HTTP协议而是用WebSocket呢？因为HTTP 协议有一个缺陷：通信只能由客户端发起，而WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

其实一句话就可以做出概括：它就是一种网络通信协议，很多高级功能都需要它。

WebSocket的优势：

1. 双向实时通信：允许在单个、长时间的连接上进行双向实时通信。在需要快速实时更新的应用程序里，比HTTP更高效。
2. 降低延迟：链接一旦建立便会保持开放，数据可以在客户端和服务器之间以比HTTP更低的延迟进行传输。
3. 更高效的资源利用：可以减少重复请求和相应的开销，因为它的连接只需要建立一次。

缺点：

1. 安全性：虽然WebSocket提供了加密选项（如通过wss协议进行加密通信），但在某些情况下，如果不正确配置或使用不安全的实践，可能会面临安全风险。例如，未经身份验证的用户可能能够建立连接并发送恶意数据。
2. 浏览器的限制：不支持IE10以前的版本，尽管现代浏览器普遍支持WebSocket，但在一些较旧的浏览器或特定版本的浏览器中，可能仍然存在兼容性问题。这可能需要开发者采取额外的措施来确保跨浏览器的兼容性，例如使用降级方案（如轮询或长轮询）或引入额外的库来处理兼容性问题。
3. 消耗服务器资源：WebSocket连接在服务器端需要保持长时间的打开状态，这可能会消耗更多的服务器资源。特别是当有大量并发连接时，服务器需要处理更多的连接和数据传输，可能导致性能下降或资源耗尽。

如何使用WebSocket：

在前端中使用 WebSocket 非常简单，首先需要在浏览器中创建一个 WebSocket 对象，然后通过该对象与服务器建立连接。一旦连接建立成功，前端可以通过发送和接收消息来实现与服务器的实时通信。

1. 创建 WebSocket 对象

在 JavaScript 中，可以通过以下代码创建 WebSocket 对象：

const socket = new WebSocket('ws://example.com'); // 根据实际情况替换为服务器的 WebSocket 地址

在上述代码中，我们创建了一个 WebSocket 对象，传入服务器的 WebSocket 地址作为参数。WebSocket 地址的协议可以是 ws（未加密）或 wss（加密）。 

2. 监听事件

一旦 WebSocket 连接建立成功，就可以通过监听事件来处理连接状态和消息的收发。

监听事件有： onopen 事件（连接建立）、onmessage 事件（收到消息）、onclose 事件（连接关闭）、onerror 事件（连接错误）。每当相应的事件触发时，我们通过回调函数来处理相应的逻辑。

3. 发送和接收消息

一旦 WebSocket 连接建立成功，就可以通过 send() 方法来发送消息，同时通过 onmessage 事件来接收消息。

// 发送消息
socket.send('Hello, WebSocket!');

// 接收消息在上面的监听代码中已经处理

webSocket心跳机制：

为什么使用心跳机制：为了保持WebSoket稳定的长连接，在建立连接之后，服务端和客户端之间通过心跳包来保持连接状态，以防止连接因为长时间没有数据传输而被切断。

什么是心跳包：心跳包是一种特殊的数据包，它不包含任何实际数据，只是用来维持连接状态的。

怎么使用：通常情况下心跳包由客户端和服务端定期发送一个空的数据帧，以确保双方的链接仍然有效，避免链接因为长时间没有数据传输而被中断，如果长时间没有收到对方的心跳包就可以认为连接已经断开需要重新建立连接。

案例：

1.创建一个文件夹
2.初始化并安装websocket

npm init -y

npm install websocket

3.创建websocket服务端，命名为server.js 

const WebSocket = require('ws');  
  
const wss = new WebSocket.Server({ port: 8080 },()=>{
  console.log('cyl: ','http://localhost:8080');
});  
  
wss.on('connection', ws => {  
  ws.on('message', message => {  
    console.log('服务端已接收到：', message);  
    ws.send('你输入的是' + message);  
  });  
  
  ws.send('websocket连接已建立');  
});

这个服务器会监听8080端口。当有客户端连接时，它会发送一条欢迎消息，并在收到客户端的消息时回复。 

4.创建传送给客户端的文件

你可以使用任何支持WebSocket的客户端来与你的服务器通信。这里，我们将创建一个简单的HTML页面作为客户端。

<h1>WebSocket Client</h1>  
  <button onclick="connect()">Connect</button>  
  <button onclick="sendMessage()">Send Message</button>  
  <div id="output"></div>  
  
  <script>  
    let ws;  
  
    function connect() {  
      ws = new WebSocket('ws://localhost:8080');  
  
      ws.onopen = function(event) {  
        console.log('Connected to server');  
        document.getElementById('output').innerHTML += '<p>Connected to server</p>';  
      };  
  
      ws.onmessage = function(event) {  
        console.log('客户端接收到消息：', event.data);  
        document.getElementById('output').innerHTML += `<p>接收到消息: ${event.data}</p>`;  
      };  
  
      ws.onerror = function(error) {  
        console.error('WebSocket Error:', error);  
      };  
  
      ws.onclose = function(event) {  
        console.log('Connection closed:', event);  
      };  
    }  
  
    function sendMessage() {  
      if (ws.readyState === WebSocket.OPEN) {  
        const message = prompt('Enter a message to send to the server:');  
        ws.send(message);  
      } else {  
        alert('Not connected to server');  
      }  
    }  
  </script>  

4.启动服务端 

node server.js

 服务启动成功

至此，利用websocket进行实时通信成功：