1分钟创建一个实时通信应用

2023-10-30 19:16:00 浏览数 (2)

关注“希里安”,get更多有用干货!

## 近日见闻

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(跨域资源共享)策略可以在不同域之间建立连接。

先看下效果:

客户端:

服务端:

创建服务端:

代码语言:javascript复制
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');

创建客户端:

代码语言:javascript复制
<!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>

0 人点赞