WebSoker-APPNodejs实现WebSoker通信APP端代码示例

Nodejs实现WebSoker通信APP端

代码示例

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket</title>
</head>
<body>
  <h1>WebSocket</h1>
  <!-- 输入框，用于输入消息内容 -->
  <input type="text" id="messageInput" placeholder="Type a message">
  <!-- 发送按钮，点击后将当前输入的消息发送到服务器 -->
  <button id="sendButton">发送</button>
  <!-- 输入框，用于输入目标客户端的ID -->
  <input type="text" id="targetClientIdInput" placeholder="Target Client ID">
  <!-- 指定发送按钮，点击后将当前输入的消息发送给指定的客户端 -->
  <button id="sendToButton">指定发送</button>
  <!-- 用于显示消息的容器 -->
  <div id="messages"></div>
  <script>
    // 获取用于显示消息的 div 容器
    const messagesDiv = document.getElementById('messages');
    // 获取输入消息内容的文本框元素
    const messageInput = document.getElementById('messageInput');
    // 获取发送消息的按钮元素
    const sendButton = document.getElementById('sendButton');
    // 获取输入目标客户端 ID 的文本框元素
    const targetClientIdInput = document.getElementById('targetClientIdInput');
    // 获取指定发送按钮元素
    const sendToButton = document.getElementById('sendToButton');
    // 创建 WebSocket 连接到服务器
    const ws = new WebSocket('ws://localhost:3000');
    
    // 当 WebSocket 连接建立时触发的事件处理程序
    ws.addEventListener('open', (event) => {
      console.log('已连接到 WebSocket 服务器');
    });
    
    // 当接收到来自服务器的消息时触发的事件处理程序
    ws.addEventListener('message', (event) => {
      // 获取接收到的消息数据
      const message = event.data;
      // 创建一个段落元素，用于显示消息
      const messageElement = document.createElement('p');
      // 将消息数据设置为段落元素的文本内容
      messageElement.textContent = message;
      // 将段落元素添加到消息容器中，显示消息
      messagesDiv.appendChild(messageElement);
    });
    
    // 当发送按钮被点击时触发的事件处理程序
    sendButton.addEventListener('click', () => {
      // 获取用户输入的消息内容
      const message = messageInput.value;
      // 如果消息内容不为空
      if (message) {
        // 通过 WebSocket 发送消息给服务器
        ws.send(message);
        // 清空消息输入框
        messageInput.value = '';
      }
    });
    
    // 当指定发送按钮被点击时触发的事件处理程序
    sendToButton.addEventListener('click', () => {
      // 获取用户输入的目标客户端 ID
      const targetClientId = targetClientIdInput.value;
      // 获取用户输入的消息内容
      const message = messageInput.value;
      // 如果目标客户端 ID 和消息内容都不为空
      if (targetClientId && message) {
        // 通过 WebSocket 发送消息给服务器，指定目标客户端
        ws.send(`/sendto ${targetClientId} ${message}`);
        // 清空消息输入框和目标客户端 ID 输入框
        messageInput.value = '';
        targetClientIdInput.value = '';
      }
    });
  </script>
</body>
</html>