HTML - WebSockets

上一页
下一页

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

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

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

语法

以下是创建新的 WebSocket 对象的 API

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

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

WebSocket 的属性

以下是 WebSocket 对象的属性。假设我们如上所述创建了一个套接字对象

属性 描述
Socket.readyState

只读属性 readyState 表示连接的状态。它可以具有以下值：

  • 值为 0 表示尚未建立连接。
  • 值为 1 表示连接已建立，可以进行通信。
  • 值为 2 表示连接正在进行关闭握手。
  • 值为 3 表示连接已关闭或无法打开。
Socket.bufferedAmount

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

WebSocket 事件

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

事件 值与事件处理程序 值与描述
open Socket.onopen 当套接字连接建立时发生此事件。
message Socket.onmessage 当客户端从服务器接收数据时发生此事件。
error Socket.onerror 当通信发生任何错误时发生此事件。
close Socket.onclose 当连接关闭时发生此事件。

WebSocket 方法

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

方法 描述
Socket.send()

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

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

使用 Python 设置 WebSocket 服务器

步骤 1. 安装 Python
如果您的设备上没有安装 Python，请从Python.org下载并安装。
步骤 2. 安装 WebSocket 库
安装 python 后，为您的项目创建一个文件夹，并在命令提示符或终端中打开该文件夹。然后运行此提示。
pip install websockets
步骤 3. 创建 websocket 服务器
打开任何文本编辑器并编写以下 Python 代码。然后将其另存为名为“server.py”的文件。
import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        print(f"Received message: {message}")
        await websocket.send(f"Server: You said \"{message}\"")

start_server = websockets.serve(echo, "localhost", 8080)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
步骤 4. 运行服务器
在终端中导航到您的项目文件夹，并运行此命令以启动服务器。
python server.py

为服务器设置 HTML 客户端

到目前为止，我们为 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://127.0.0.1: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>
打印页面
上一页
下一页
广告