一分钟创建一个websocket应用

  • 2023/8/17
  • 阅读时间 1 分钟

近日见闻

  1. OpenAI使用GPT-4 LLM进行内容审核，警告不要有偏见，该公司希望在人类参与循环的情况下消除训练期间引入的不良偏见。

  2. 8月15-16日，DeveloperWeek CloudX 在美国加州San Mateo 圆满举行。会议期间，大会颁布了 CloudX 2023 奖项获得者。WasmEdge Runtime荣获 2023 年 CloudX 大奖的云物联网和边缘计算类别奖！

  3. 2023年8月14日，OpenTiny Vue 发布了 v3.10.0

  4. KubeSphere 企业版 4.0 发布

创建简单的websocket应用

WebSocket 是一种通信协议，用于在客户端和服务器之间建立持久的双向通信连接，使得数据能够在连接的两端实时传输。与传统的 HTTP 请求-响应模型不同，WebSocket 允许服务器主动向客户端推送数据，同时也能够接收客户端发送的数据，实现了实时交互。WebSocket 协议是基于 TCP 协议的，它定义了一种标准的握手协议和数据帧格式，用于在客户端和服务器之间建立通信连接。由于其实时性和双向通信的特点，WebSocket 在许多应用中得到了广泛应用，尤其是需要实时交互和推送数据的场景。

WebSocket 协议的主要特点包括：

持久连接：WebSocket 连接在客户端和服务器之间建立后，会保持持久性连接，而不需要每次通信都重新建立连接。这降低了连接的开销，适用于实时性要求较高的应用，如实时游戏、聊天应用、实时数据展示等。

双向通信：WebSocket 允许双方同时发送和接收数据，实现了全双工通信，而不像传统的 HTTP 请求-响应模型只能由客户端发起请求，服务器响应。

较低的开销：WebSocket 协议相对于 HTTP 有较低的通信开销，因为它在建立连接时只需要进行一次握手，之后只需传输少量的控制信息。

实时性：由于持久连接和双向通信的特性，WebSocket 能够实现实时的数据传输，适用于需要实时性响应的应用场景。

跨域支持：WebSocket 可以跨域使用，通过 CORS（跨域资源共享）策略可以在不同域之间建立连接。

创建服务端：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // Echo the message back to the client
    ws.send(`You sent: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server is running on port 8080');

创建客户端：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Client</title>
</head>
<body>
  <input id="messageInput" placeholder="Type a message">
  <button id="sendButton">Send</button>
  <div id="output"></div>

  <script>
    const socket = new WebSocket('ws://localhost:8080');

    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');
    const outputDiv = document.getElementById('output');

    socket.onopen = () => {
      console.log('Connected to server');
    };

    socket.onmessage = (event) => {
      const message = event.data;
      outputDiv.innerHTML = `Received: ${message}`;
    };

    socket.onclose = () => {
      console.log('Disconnected from server');
    };

    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      socket.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>
websocket