关于websocket你不得不知道的知识点

一、什么是websocket？(实时+加密）

WebSocket是一种基于TCP协议的全双工通信协议，它可以在客户端和服务器之间建立一个持久连接，实现双向通信。WebSocket协议的优点在于可以提供实时的数据传输和实现低延迟的通信效果。

WebSocket与传统的HTTP协议有以下区别：

1. 连接方式：HTTP协议是一种请求-响应协议，客户端发送请求，服务器返回响应后立即关闭连接；而WebSocket协议是一种长连接协议，客户端和服务器之间建立一个持久连接，可以保持连接状态，实现实时的数据传输和通信。
2. 数据格式：HTTP协议传输的数据格式主要是文本和二进制数据，而WebSocket协议传输的数据格式可以包含任意类型的数据，例如文本、二进制数据等。
3. 传输效率：由于WebSocket协议是一种长连接协议，可以避免频繁建立和关闭连接的开销，从而在传输效率方面有更好的表现。
4. 安全性：HTTP协议的数据传输是明文传输，容易被窃听和篡改；而WebSocket协议可以通过TLS/SSL协议进行加密，提高数据传输的安全性。
5. 应用场景：HTTP协议适用于客户端请求服务器获取响应的场景，例如浏览器加载网页、下载文件等；WebSocket协议适用于实时通信、实时数据传输等场景，例如在线游戏、即时通讯等。

因此，WebSocket协议相较于传统的HTTP协议在实时性、传输效率和安全性等方面有更好的表现，适用于一些特定的应用场景。

WebSocket协议的使用需要客户端和服务器都支持该协议。客户端通常使用JavaScript中的WebSocket API来与服务器建立连接和发送数据，而服务器端需要实现WebSocket协议的相关代码来处理客户端请求和发送数据。常用的服务器端实现包括Node.js的ws模块和Java的Java-WebSocket库等。

二、webSocket用在物联网平台的案例

WebSocket协议在物联网平台中应用非常广泛，以下是一些可能的案例：

1. 智能家居控制：智能家居是物联网应用的典型场景之一，通过使用WebSocket协议，可以实现智能家居设备之间的实时通信和数据传输，例如智能灯光控制、智能门锁控制等。
2. 工业自动化控制：工业自动化控制是另一个物联网应用的典型场景，在工业自动化中，WebSocket协议可以用于实时监测和控制设备的状态，例如工业机器人控制、智能仓储管理等。
3. 物流监控：物流监控是物联网应用的另一个重要领域，通过使用WebSocket协议，可以实时监测物流运输过程中的位置、温度、湿度等数据，从而提高物流管理的效率和安全性。
4. 智能农业：智能农业是物联网应用的新兴领域，通过使用WebSocket协议，可以实时监测和控制农业设备的状态，例如温室气候控制、自动灌溉系统等。

这些案例只是物联网应用中的一部分，实际上WebSocket协议在物联网平台中应用的场景非常丰富，可以根据具体的应用场景和需求来选择合适的技术方案。

三、实践用例

场景：

前端给后端发送一个请求，表明想要控制一些设备。

后端下发指令给了设备端，把这个设备打开，但是由于从设备端到后端的时间太久了，如果这个时候等设备返回给后端之后再返回给前端，前端的等待时间就会非常久。

解决方案：

一、异步调用：

可以使用异步调用的方式来处理设备端的响应。在后端将指令发送给设备端后，可以立即返回响应给前端，同时启动一个异步任务来等待设备端的响应。当设备端响应后，该异步任务会立即处理响应并将结果返回给前端。

缺点：使用异步调用，由于你返回响应给了前端，前端以为设备已经控制完成，就会去获取设备当前的状态，可能会出现设备端还没有更新状态时，前端已经刷新页面导致数据错误的情况。

优化方案：为了避免这种情况，可以在前端和后端之间建立长连接，从而实现实时通信和数据传输。

通过使用WebSocket协议，可以实现客户端和服务器之间的实时通信和数据传输，从而避免数据错误的问题。此外，WebSocket还可以提高应用程序的实时性和响应速度，从而提升用户体验。

1. 前端建立WebSocket连接：前端代码使用JavaScript中的WebSocket API与后端建立WebSocket连接，从而可以实现客户端和服务器之间的实时通信。
2. 后端将指令发送给设备端：后端将指令发送给设备端，并启动一个异步任务来等待设备端的响应。
3. 设备端将状态更新发送给后端：设备端将状态更新发送给后端，后端将状态更新转发给前端，前端通过WebSocket接收状态更新并更新页面中的数据。

二、轮询：

可以在前端使用轮询的方式来获取设备端的响应。在前端发送指令后，可以定时向后端发送请求来获取设备端的响应，直到收到响应为止。轮询的方式虽然不能实现实时通信，但可以保证在一定时间内获取到设备端的响应，从而避免等待时间过长的问题。

前端如何使用webSocket

SocketJS是一个基于WebSocket的JavaScript库，它提供了一种简单的方式来实现实时数据传输和双向通信。以下是前端使用SocketJS的简单步骤：

1. 引入SocketJS库：在HTML页面中引入SocketJS库，例如：

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/sockjs.min.js>"></script>

1. 创建WebSocket连接：使用SockJS库提供的SockJS对象来创建WebSocket连接，例如：

const socket = new SockJS('/websocket');

这里创建了一个WebSocket连接，并指定连接的URL为/websocket。

1. 监听WebSocket事件：通过socket对象监听WebSocket事件，例如：

socket.onopen = function() {
    
    
  console.log('WebSocket连接已建立');
};

socket.onmessage = function(event) {
    
    
  console.log('收到服务器发送的消息：', event.data);
};

socket.onclose = function() {
    
    
  console.log('WebSocket连接已关闭');
};

这里监听了WebSocket的onopen、onmessage和onclose事件，并在事件发生时执行相应的回调函数。

1. 发送数据：使用socket.send()方法发送数据到服务器，例如：

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

这里向服务器发送了一个字符串消息。

总之，使用SocketJS可以简单地实现前端的WebSocket连接和数据传输，从而实现实时数据传输和双向通信的功能。需要注意的是，在使用SocketJS时，服务器端也需要实现相应的WebSocket协议的代码来处理客户端请求和发送数据。

完整案例

前端给后端发送一个请求，表明想要控制一些设备。

服务器端去给设备端下发开的指令.

设备返回给服务端说已经开了的时候.

后端将这个数据传递回前端.

当使用WebSocket协议时，可以实现实时的双向通信，以下是一个更高级的基于WebSocket协议的案例，用于控制设备开关：

服务器端代码：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();

// 创建 HTTP 服务器
const server = http.createServer(app);

// 创建 WebSocket 服务
const wss = new WebSocket.Server({
    
     server });

// 模拟设备状态
let deviceStatus = 'off';

// 监听 WebSocket 连接
wss.on('connection', function connection(ws) {
    
    
  console.log('WebSocket connected');

  // 监听 WebSocket 消息
  ws.on('message', function incoming(message) {
    
    
    console.log('received: %s', message);

    // 解析消息内容
    const data = JSON.parse(message);

    // 如果消息类型为控制设备开关
    if (data.type === 'control') {
    
    
      // 模拟控制设备开关
      if (data.value === 'on') {
    
    
        deviceStatus = 'on';
      } else if (data.value === 'off') {
    
    
        deviceStatus = 'off';
      }

      // 发送设备状态给前端
      ws.send(JSON.stringify({
    
     type: 'status', value: deviceStatus }));
    }
  });
});

// 启动服务器
server.listen(3000, function() {
    
    
  console.log('Server is running on port 3000');
});

前端代码：

const socket = new WebSocket('ws://localhost:3000');

const buttonOn = document.getElementById('button-on');
const buttonOff = document.getElementById('button-off');
const statusLabel = document.getElementById('status-label');

socket.addEventListener('open', function(event) {
    
    
  console.log('WebSocket connected');
});

socket.addEventListener('message', function(event) {
    
    
  console.log(`Message from server: ${
      
      event.data}`);

  // 解析消息内容
  const data = JSON.parse(event.data);

  // 如果消息类型为设备状态
  if (data.type === 'status') {
    
    
    statusLabel.innerHTML = `Device status: ${
      
      data.value}`;
  }
});

buttonOn.addEventListener('click', function() {
    
    
  // 发送控制消息给服务器
  const message = JSON.stringify({
    
     type: 'control', value: 'on' });
  socket.send(message);
});

buttonOff.addEventListener('click', function() {
    
    
  // 发送控制消息给服务器
  const message = JSON.stringify({
    
     type: 'control', value: 'off' });
  socket.send(message);
});

以上代码展示了一个基本的控制设备开关的WebSocket通信流程，前端通过WebSocket对象连接到服务器端，发送控制消息给服务器端，服务器端模拟控制设备开关，并将设备状态返回给前端。在实际应用中，可以根据具体的需求和场景，进一步扩展和优化WebSocket通信的功能和性能。