Html 简明教程

HTML - WebSockets

WebSockets 是一种面向 Web 应用程序的下一代双向通信技术，它通过单个套接字进行通信。

WebSockets 允许双向通信，这意味着客户端和服务器都可以独立且同时向彼此发送数据。

在与 Web 服务器建立 Web Socket 连接后，我们可以通过调用 send() 方法将数据从浏览器发送到服务器，并通过 onmessage 事件处理程序从服务器接收数据到浏览器。

Syntax

以下是用于创建新 WebSocket 对象的 API。

var Socket = new WebSocket(url, [protocol] );

这里，第一个参数 url 指明要连接的 URL。第二个属性 protocol 是可选的，如果存在，则指明服务器必须支持的子协议，以便连接成功。

Attributes of WebSocket

以下是 WebSocket 对象的属性。假设我们如上所述创建了 Socket 对象。

Attribute

Description

Socket.readyState

只读属性 readyState 表示连接状态。它可以有以下值。值为 0 表示连接尚未建立。值为 1 表示连接已建立且可以通信。值为 2 表示连接正在进行关闭握手。值为 3 表示连接已关闭或无法打开。

Socket.bufferedAmount

只读属性 bufferedAmount 表示已使用 send() 方法排队的 UTF-8 文本字节数。

WebSocket Events

以下是与 WebSocket 对象关联的事件。假设我们如上所述创建了 Socket 对象。

Event

Values & Event Handler

Values & Description

open

Socket.onopen

当建立套接字连接时，将发生此事件。

message

Socket.onmessage

当客户端从服务器接收数据时，将发生此事件。

error

Socket.onerror

当通信中出现任何错误时，将发生此事件。

Socket.onclose

当连接关闭时，将发生此事件。

WebSocket Methods

以下是与 WebSocket 对象关联的方法。假设我们如上所述创建了 Socket 对象。

Method

Description

Socket.send()

send(data) 方法使用连接传输数据。

Socket.close()

close() 方法可用于终止任何现有连接。

Setting Up the WebSocket Server with Python

Setting up HTML client for the server

到目前为止，我们为 WebSocket 设置了一个 Python 服务器。该服务器将在您的终端上运行，因此发送到服务器的任何消息都将在终端上可见。在这里，我们将看到如何设置一个客户端，它可以使用 HTML 和 JavaScript 从服务器接收消息，也可以向服务器发送消息。

在文件夹中创建一个 HTML 文件“index.html”

<!DOCTYPE html>
<html lang="en">

<head>
   <title>WebSocket Example</title>
</head>

<body>
   <h1>WebSocket Client</h1>
   <input type="text"
          id="messageInput"
          placeholder="Type a message..." />
   <button id="sendButton">
      Send
   </button>
   <div id="messages">
   </div>

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

      socket.addEventListener('open',
      () => {
      console.log('Connected to server');
      });

      socket.addEventListener('message',
      (event) => {
      const messageDiv = document.createElement('div');
      messageDiv.textContent = event.data;
      document.getElementById('messages').appendChild(messageDiv);
      });

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