HTML - WebSockets

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

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

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

语法

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


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

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

WebSocket 的属性

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

属性	描述
Socket.readyState	readonly 属性 readyState 表示连接的状态。它可以具有以下值。值为 0 表示尚未建立连接。值为 1 表示已建立连接并且可以进行通信。值为 2 表示连接正在通过结束握手。值为 3 表示连接已关闭或无法打开。
Socket.bufferedAmount	readonly 属性 bufferedAmount 表示使用 send（）方法排队的 UTF-8 文本的字节数。

属性

描述

Socket.readyState

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

值为 0 表示尚未建立连接。
值为 1 表示已建立连接并且可以进行通信。
值为 2 表示连接正在通过结束握手。
值为 3 表示连接已关闭或无法打开。

Socket.bufferedAmount

readonly 属性 bufferedAmount 表示使用 send（）方法排队的 UTF-8 文本的字节数。

WebSocket 事件

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

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

WebSocket 方法

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

方法	描述
Socket.send()	send（data）方法使用连接传输数据。
Socket.close()	close（）方法将用于终止任何现有连接。

使用 Python 设置 WebSocket 服务器

第 1 步：安装 Python 如果您的设备上没有安装 python，请从 Python.org 下载并安装它 pip install websockets

第 2 步：安装 WebSocket 库安装 python 后，为您的项目创建一个文件夹，然后在命令提示符或终端中打开该文件夹。然后运行此提示符。

第 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://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>

打印本页