东莞凤岗做网站,wordpress外网访问错误,做化妆品的网站有哪些,手机怎么搭建属于自己的网站文章目录 背景WebSocket API使用场景优点 实例步骤 1: 设置 WebSocket 服务器步骤 2: 创建客户端 HTML 页面步骤 3: 测试 WebSocket 通信注意事项实际操作 参考资料 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得浏览器和服务器只需建立一个连接#xff0c;… 文章目录 背景WebSocket API使用场景优点 实例步骤 1: 设置 WebSocket 服务器步骤 2: 创建客户端 HTML 页面步骤 3: 测试 WebSocket 通信注意事项实际操作 参考资料 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得浏览器和服务器只需建立一个连接就可以实现数据的双向持久交换。WebSocket 是 HTML5 的一部分旨在在 Web 应用程序和服务器之间建立持久的通道以便发送实时数据。 背景
在 WebSocket 出现之前实现实时 web 应用程序较为复杂。传统的 HTTP 请求和响应模型只能实现单向通信而且每次客户端到服务器的请求都需要建立新的连接。这意味着实时性能差、延迟高。开发者曾使用轮询、长轮询和Server-Sent事件等技术来模拟实时通信但这些方法仍然有着延迟高和效率低等缺点。
随着实时互联网应用的需求增长诸如即时通讯、协作工具、在线游戏和财务交易等应用需要更有效、更即时的解决方案WebSocket 应运而生。
WebSocket 协议 WebSocket 协议由两部分组成握手和数据传输。
握手
握手过程通过 HTTP 请求完成称为 “WebSocket 握手”。客户端发起握手请求通常如下
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ
Sec-WebSocket-Version: 13如果服务器支持 WebSocket将返回一个 HTTP 响应如下
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbKxOo握手完成后HTTP 连接即被提升为 WebSocket 连接。
数据传输
一旦握手成功客户端和服务器就可以通过新建立的 WebSocket 连接两端发送和接收数据。数据可以以「帧」的形式交换WebSocket 协议支持文本和二进制数据的传输。
WebSocket API
在客户端例如 Web 浏览器WebSocket 通过简单的 JavaScript WebSocket API 进行操作。以下是一个基本的 WebSocket API 使用示例
// 创建新的WebSocket连接
var socket new WebSocket(ws://www.example.com/socketserver);// 连接打开的事件处理
socket.onopen function(event) {console.log(WebSocket connection established.);// 发送数据到服务器socket.send(Hello Server!);
};// 接收到服务器数据时的事件处理
socket.onmessage function(event) {console.log(Message from server:, event.data);
};// 连接关闭的事件处理
socket.onclose function(event) {console.log(WebSocket connection closed.);
};// 连接发生错误时的事件处理
socket.onerror function(error) {console.error(WebSocket error:, error);
};使用场景
WebSocket 特别适用于需要快速、频繁或双向通信的应用程序。典型的使用场景包括
在线游戏聊天应用实时通知和更新实时协作工具实时数据流如股票价格或体育比赛实时得分物联网 (IoT) 控制和监控
优点
减少通信延时实时、双向的通信减少了数据传输的等待时间。减少资源消耗与轮询等技术相比WebSocket在保持连接开放时消耗的资源更少。全双工通信允许同时进行客户端和服务器之间的数据传输。
实例
要演示一个使用 WebSocket 进行通信的简单示例我们需要两个组件一个 WebSocket 服务器以及一个静态 HTML 页面作为客户端。
步骤 1: 设置 WebSocket 服务器
首先我们需要建立一个 WebSocket 服务器。这里我们使用 Node.js 和 ws 库来创建一个简单的 WebSocket 服务器。如果你还没有安装 Node.js请先从 Node.js 官网 下载并安装。
在你的工作目录下创建一个新文件 server.js 并输入以下代码
const WebSocket require(ws);const wss new WebSocket.Server({ port: 8080 });wss.on(connection, function connection(ws) {console.log(A new client connected!);ws.on(message, function incoming(message) {console.log(received: %s, message);});ws.send(Hello! Message From Server!!);
});然后你需要安装 ws 库。打开终端或命令提示符切换到包含 server.js 的目录并运行
npm init -y
npm install ws之后通过以下命令运行服务器
node server.js步骤 2: 创建客户端 HTML 页面
下一步是创建一个简单的客户端通过 WebSocket 与服务器进行通信。在同一目录下创建一个新的 HTML 文件 index.html 并输入以下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleWebSocket Demo/titlescriptdocument.addEventListener(DOMContentLoaded, function () {var ws new WebSocket(ws://localhost:8080);ws.onopen function () {console.log(Connected to the WebSocket server);ws.send(Hello! Message From Client!!);};ws.onmessage function (evt) {console.log(Message from server: evt.data);};});/script
/head
bodyh2WebSocket Client/h2
/body
/html步骤 3: 测试 WebSocket 通信
为了测试 WebSocket 通信
确保 WebSocket 服务器正在运行。 使用 Web 浏览器打开 index.html 文件。你可以通过双击该文件或在终端中运行一个简单的 HTTP 服务器来实现例如使用 Python 的 http.server 模块或 Node.js 的 http-server 包。 以下是使用 Python 的 http.server 运行本地服务器的示例
# 如果你有 Python 3
python -m http.server# 如果是 Python 2
python -m SimpleHTTPServer浏览器打开 index.html 后通过开发者工具F12 或右键菜单 Inspect的 console 标签页查看客户端和服务器之间的通信输出。你将能看到客户端和服务器之间互相发送的消息。
这个简单的示例展示了 WebSocket 的基本用法建立一个持久的连接并实现客户端与服务器之间的实时、双向通信。WebSocket 非常适合需要快速响应的 Web 应用程序如在线游戏、聊天应用和实时交易平台。
注意事项
index.html 文件应该放置在您能够方便访问的地方。如果您仅仅是为了本地测试那么您可以将它放在任意一个您能够通过浏览器访问的地方。这里有一些常见的选项 直接在本地文件系统中打开您可以将 index.html 文件放置在您的计算机上任何一个位置然后通过在浏览器中输入文件的路径或者通过文件浏览器双击来打开它。例如如果您的文件位于 Windows 系统的“文档”文件夹中路径可能类似于 file:///C:/Users/YourName/Documents/index.html。 使用本地服务器如果您的实例涉及网络请求或者您想模拟更真实的服务器环境您可能想要将 index.html 放置在本地运行的 web 服务器的根目录通常是 public 或 www 文件夹。可以使用 Python、Node.js 或其他软件包创建本地服务器。
以下是使用 Python 创建本地服务器的方法
如果您有 Python 3
# 进入包含 index.html 的目录
cd path/to/directory
# 启动服务器默认端口号为 8000
python -m http.server如果是 Python 2
# 进入包含 index.html 的目录
cd path/to/directory
# 启动服务器默认端口号为 8000
python -m SimpleHTTPServer如果使用的是 Node.js您可以使用 http-server
首先安装 http-server
npm install -g http-server然后运行服务器
# 进入包含 index.html 的目录
cd path/to/directory
# 启动服务器默认端口号为 8080
http-server将文件放在项目目录中如果您使用的是版本控制系统如 git或者您有一个项目的文件夹结构那么将 index.html 放在项目的根目录或特定的子目录如 src 或 public是个好主意。 无论您将 index.html 文件放在何处都需要确保浏览器访问的 URL 能够映射到文件系统中正确的位置。在本地服务器的情况下服务器的根目录通常对应您执行启动命令的位置。 直接从文件系统打开时文件路径将会被直接用作 URL。
实际操作
当我在浏览器里输入http://localhost:8000/后浏览器得到以下返回消息
python的http server也输出以下日志
python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [06/Apr/2024 18:06:10] GET / HTTP/1.1 200 -
::1 - - [06/Apr/2024 18:06:10] code 404, message File not found
::1 - - [06/Apr/2024 18:06:10] GET /favicon.ico HTTP/1.1 404 -打开浏览器的开发者工具点击控制台tab能够看到websocket的回应
node js server也输出了
node server.js
A new client connected!
received: Hello! Message From Client!!说明我们的例子是有效的。
参考资料
MDN Web Docs: WebSocket - Mozilla 提供的 WebSocket API 文档非常适合初学者和经验丰富的开发者。其中提供了关于如何使用 WebSocket API 的具体信息以及代码示例。
WebSocket API Specification - W3C 提供的官方 WebSocket API 规范。这是一个技术文档详细描述了 API 的工作原理。
HTML Living Standard: WebSockets - WHATWG 提供的 HTML 规范其中包括了 WebSocket 的定义和背景信息。
The WebSocket Protocol (RFC 6455) - 这是定义 WebSocket 协议的官方文档。对于想要深入理解协议本身的开发者来说非常有用。
WebSocket-Node - 这是一个用于 Node.js 的 WebSocket 库。如果您计划在服务器端使用 Node.js这将是一个宝贵的资源。
ws: a Node.js WebSocket library - Node.js 的 ws 库是一个流行的 WebSocket 实现适用于需要在服务器端使用 WebSocket 的场景。
Socket.io - Socket.io 是一个基于 WebSocket 和其他技术实现的库它提供了附加的功能如房间支持、事件广播等。虽然不是纯粹的 WebSocket 库但它是构建实时应用程序的流行选择。
