Server-sent Events 与 Websocket 构建机器人控制应用的实践-JavaScript中文网-JavaScript教程资源分享门户

随着机器人技术的不断发展，机器人应用也越来越广泛，从工业制造到家庭服务，无处不在。然而，如何通过前端技术实现机器人控制应用，成为了一个重要的话题。本文将介绍如何使用 Server-sent Events 和 Websocket 技术，构建一个基本的机器人控制应用。该应用能够实时获取机器人的状态信息并进行控制。

什么是 Server-sent Events

Server-sent Events （SSE）是 HTML5 新增的一种服务器推送技术。SSE 允许服务器向客户端单向推送数据，而无需客户端每次都发送请求。在 SSE 中，服务器使用 HTTP 协议向客户端发送数据流，客户端通过 EventSource API 接受这些数据流，从而实现了实时推送的效果。

与 Websocket 技术相比，SSE 更加轻量级，并且能够使用现有的 HTTP 功能（如 cookie 和身份验证）。但是，SSE 也有一些限制，无法发送大量的数据和完成多种复杂的通信模式，如全双工通信和二进制数据传输。

什么是 Websocket

Websocket 是 HTML5 新增的一种双向通信协议，它使得浏览器与服务器之间可以建立长连接，双方可以通过发送消息进行实时通信。Websocket 协议被设计为与 HTTP 协议兼容，支持握手协议，能够穿越防火墙和代理服务器，广泛用于实时通信场景。

Websocket 技术相对于 SSE 技术，能够通过全双工通信实现更加复杂的通信模式，同时也支持发送大量数据和二进制数据传输。但是，Websocket 技术需要客户端和服务器都支持，而且不能使用现有的 HTTP 功能进行身份验证。

构建机器人控制应用的实践

我们将使用 Node.js 作为服务器端，使用 SSE 和 Websocket 技术实现机器人控制应用。以下是该应用的基本架构：

在该架构中，客户端通过 SSE 和 Websocket 技术获取机器人的状态信息，并可以发送控制指令给机器人。服务器会将机器人的状态信息保存在一个变量中，并将这个变量的值分别通过 SSE 和 Websocket 推送给客户端。

下面是服务器端的基本代码：

// javascriptcn.com 代码示例
const http = require('http');
const express = require('express');
const { EventEmitter } = require('events');
const cors = require('cors');

const app = express();
app.use(cors());

const state = {}; // 机器人的状态信息
const eventEmitter = new EventEmitter();

// SSE 接口
app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 订阅机器人状态的更新事件
  eventEmitter.on('update', (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  });

  // 发送初始化状态信息
  res.write(`data: ${JSON.stringify(state)}\n\n`);
});

// Websocket 接口
const server = http.createServer(app);
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  // 发送初始化状态信息
  ws.send(JSON.stringify(state, null, 2));

  // 接收客户端发送的控制指令
  ws.on('message', (message) => {
    const json = JSON.parse(message);

    // 控制机器人
    console.log(`controlling robot with command ${json.command}`);

    // 更新机器人状态
    Object.assign(state, json);
    eventEmitter.emit('update', state);
  });
});

server.listen(8080, () => {
  console.log('Server is running on port 8080');
});

在上面的代码中，我们使用 Node.js、Express、EventEmitter、cors、http 和 WebSocket 等模块搭建了一个监听 8080 端口的服务器。使用 Express 中间件设置了 CORS，避免客户端跨域问题。定义了一个名为 state 的变量，用于保存机器人的状态信息。定义了一个名为 eventEmitter 的 EventEmitter 实例，用于机器人状态信息的更新和推送。

接着，我们定义了两个接口：一个 SSE 接口和一个 Websocket 接口。在 SSE 接口中，我们设置了响应头，然后订阅机器人状态的更新事件，当有更新时，将更新的状态信息发送给客户端。在 Websocket 接口中，我们定义了一个 WebSocket 服务器，在客户端连接时，发送初始化状态信息并接收客户端发送的控制指令。当接收到指令后，我们控制机器人并更新状态信息，然后通过 EventEmitter 推送状态信息。

下面是客户端的基本代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Websocket Robot Control</title>
</head>

<body>
  <h1>Websocket Robot Control</h1>

  <div id="state">
    <pre></pre>
  </div>

  <form id="form">
    <label>Direction:</label>
    <select name="direction">
      <option value="left">Left</option>
      <option value="right">Right</option>
      <option value="forward">Forward</option>
      <option value="backward">Backward</option>
    </select>
    <br>
    <label>Speed:</label>
    <input type="range" name="speed" value="50" min="0" max="100">
    <br>
    <button type="submit">Submit</button>
  </form>

  <script>
    const state = document.querySelector('#state pre');
    const form = document.querySelector('#form');
    const url = 'ws://localhost:8080';

    // SSE
    const source = new EventSource('/sse');
    source.onmessage = (event) => {
      state.textContent = JSON.stringify(JSON.parse(event.data), null, 2);
    };

    // Websocket
    const websocket = new WebSocket(url);
    websocket.onopen = () => {
      console.log('WebSocket connected');
    };
    websocket.onmessage = (event) => {
      state.textContent = JSON.stringify(JSON.parse(event.data), null, 2);
    };

    // Form submit handler
    form.addEventListener('submit', (event) => {
      event.preventDefault();

      const data = new FormData(form);
      const json = JSON.stringify(Object.fromEntries(data.entries()))

      websocket.send(json);
    });
  </script>
</body>

</html>

在该代码中，我们使用了 HTML、CSS 和 JavaScript 技术，实现了一个基本的机器人控制应用。使用 EventSource API 通过 SSE 接口获取机器人的状态信息，并将其显示在页面中。使用 WebSocket API 通过 Websocket 接口发送控制指令，并接收机器人的状态信息。在 HTML 表单中，定义了机器人的方向和速度控制。在表单提交时，使用 WebSocket 发送表单数据。

总结

本文介绍了如何使用 Server-sent Events 和 Websocket 技术，构建一个基本的机器人控制应用。该应用能够实时获取机器人的状态信息并进行控制，实现了前端技术在机器人应用中的应用。本文不仅介绍了技术原理，还提供了实际的代码示例，可以帮助读者更好地理解和应用这些技术，具有一定的学习和指导意义。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652c4f947d4982a6ebe1f15f