websocket实践

news2025/1/22 8:59:03

在这里插入图片描述

文章目录

    • 背景
    • WebSocket API
    • 使用场景
    • 优点
  • 实例
    • 步骤 1: 设置 WebSocket 服务器
    • 步骤 2: 创建客户端 HTML 页面
    • 步骤 3: 测试 WebSocket 通信
    • 注意事项
    • 实际操作
  • 参考资料

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得浏览器和服务器只需建立一个连接，就可以实现数据的双向持久交换。WebSocket 是 HTML5 的一部分，旨在在 Web 应用程序和服务器之间建立持久的通道，以便发送实时数据。

背景

在 WebSocket 出现之前，实现实时 web 应用程序较为复杂。传统的 HTTP 请求和响应模型只能实现单向通信，而且每次客户端到服务器的请求都需要建立新的连接。这意味着实时性能差、延迟高。开发者曾使用轮询、长轮询和Server-Sent事件等技术来模拟实时通信，但这些方法仍然有着延迟高和效率低等缺点。

随着实时互联网应用的需求增长，诸如即时通讯、协作工具、在线游戏和财务交易等应用需要更有效、更即时的解决方案，WebSocket 应运而生。

WebSocket 协议
WebSocket 协议由两部分组成：握手和数据传输。

  1. 握手

握手过程通过 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: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

握手完成后，HTTP 连接即被提升为 WebSocket 连接。

  1. 数据传输

一旦握手成功，客户端和服务器就可以通过新建立的 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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
    <script>
        document.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>
<body>
    <h2>WebSocket 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 文件应该放置在您能够方便访问的地方。如果您仅仅是为了本地测试，那么您可以将它放在任意一个您能够通过浏览器访问的地方。这里有一些常见的选项：

  1. 直接在本地文件系统中打开：您可以将 index.html 文件放置在您的计算机上任何一个位置，然后通过在浏览器中输入文件的路径或者通过文件浏览器双击来打开它。例如，如果您的文件位于 Windows 系统的“文档”文件夹中，路径可能类似于 file:///C:/Users/YourName/Documents/index.html。

  2. 使用本地服务器：如果您的实例涉及网络请求或者您想模拟更真实的服务器环境，您可能想要将 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 库，但它是构建实时应用程序的流行选择。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1576465.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SWM341系列应用（MPU屏应用）

SWM341系列应用（MPU屏应用）

SWM341系列 MPU屏应用 1、MPU屏写入时序设置&#xff08;设置单位为周期&#xff09;&#xff0c;根据ST7789规格书规定的最小时序要求&#xff0c;建议MPU屏时序按照ST7789手册配置,建议配置的参数注释。例如WRRise_CSRise&#xff0c;时序图要求是最低10ns&#xff0c;根据计…
阅读更多...
1.8.3 卷积神经网络近年来在结构设计上的主要发展和变迁——GoogleNet/inception-v1

1.8.3 卷积神经网络近年来在结构设计上的主要发展和变迁——GoogleNet/inception-v1

1.8.3 卷积神经网络近年来在结构设计上的主要发展和变迁——GoogleNet/ inception-v1 前情回顾&#xff1a; 1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet 1.8.2 卷积神经网络近年来在结构设计上的主要发展和变迁——VGGNet GoogleNet问题 在VGGNet简单堆…
阅读更多...
分类预测 | Matlab实现ABC-LSSVM人工蜂群算法优化最小二乘支持向量机数据分类预测

分类预测 | Matlab实现ABC-LSSVM人工蜂群算法优化最小二乘支持向量机数据分类预测

分类预测 | Matlab实现ABC-LSSVM人工蜂群算法优化最小二乘支持向量机数据分类预测 目录 分类预测 | Matlab实现ABC-LSSVM人工蜂群算法优化最小二乘支持向量机数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现ABC-LSSVM人工蜂群算法优化最小二乘支…
阅读更多...
Redis中的Sentinel(六)

Redis中的Sentinel(六)

Sentinel 选举领头Sentinel. 当一个主服务器被判断为客观下线时&#xff0c;监视这个下线主服务器的各个Sentinel会进行协商&#xff0c;选举出一个领头Sentinel,并由领头 Sentinel对下线主服务器执行故障转移操作。以下是Redis选举领头Sentinel的规则和方法: 1.所有在线的S…
阅读更多...
LabVIEW厂房漏水检测监控系统

LabVIEW厂房漏水检测监控系统

LabVIEW厂房漏水检测监控系统 随着信息技术和智能制造的快速发展&#xff0c;对于精密仪器和重要物品存放场所的环境监控日益重要&#xff0c;特别是防止漏水带来的潜在风险。漏水不仅可能导致珍贵资料或仪器的损坏&#xff0c;还可能引发安全事故&#xff0c;给企业和研究机构…
阅读更多...
在 C++ 中轻松实现字符串与字符数组的相互转换

在 C++ 中轻松实现字符串与字符数组的相互转换

在 C 中轻松实现字符串与字符数组的相互转换 引言一、将字符串转换为 char 数组1.1、C 中的 c_str()和 strcpy()函数1.2、使用 for 循环中的字符串到字符数组的转换 二、将 char 数组转换为字符串2.1、C 运算符 2.2、C 重载 运算符2.3、C 字符串内置构造函数 三、总结 引言 本…
阅读更多...
阿里云服务器可以干嘛 阿里云服务器应用场景有哪些

阿里云服务器可以干嘛 阿里云服务器应用场景有哪些

阿里云服务器可以干嘛&#xff1f;能干啥你还不知道么&#xff01;简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;阿里云百科aliyunbaike.com整理阿里云服务器的用途&#xff1a; 阿里云服务器活动 aliyunbaike.com…
阅读更多...
qt环境搭建-镜像源安装Qt Creator（5.15.2）以及配置环境变量

qt环境搭建-镜像源安装Qt Creator（5.15.2）以及配置环境变量

前言&#xff1a; 版本&#xff1a;5.15.2 镜像源&#xff1a;ustc与清华 纯小白&#xff0c;找了半天的镜像源安装qtcreator&#xff0c;搞了半天结果安装的是最新的&#xff0c;太新的对小白很不友好&#xff0c;bug比较多&#xff0c;支持的系统也不全&#xff0c;口碑不…
阅读更多...
011_C标准库函数之＜time.h＞

011_C标准库函数之＜time.h＞

头文件<time.h>中说明了一些用于处理日期和时间的类型和函数。其中的一部分函数用于处理当地时间&#xff0c;因为时区等原因&#xff0c;当地时间与日历时间可能不相同。clock_t和time_t是两个用于表示时间的算术类型&#xff0c;而struct tm则用于存放日历时间的各个成…
阅读更多...
配置vscode用于STM32编译，Debug，github上传拉取

配置vscode用于STM32编译，Debug，github上传拉取

配置环境参考&#xff1a; Docs 用cubemx配置工程文件&#xff0c;用VScode打开工程文件。 编译的时候会有如下报错&#xff1a; vscode出现process_begin :CreateProcess failed 系统找不到指定文件 解决方案&#xff1a;在你的makefile中加上SHELLcmd.exe就可以了 参考…
阅读更多...
mysql jdbc数据库速成总结

mysql jdbc数据库速成总结

第一步导图jar包 我们下载一个jar 按照我的习惯是把这个jar包放在桌面上 方便后续操作 然后对这个jar包ctrl c复制 接着我们在idea里面创建一个目录 我们命名为lib 然后在这个lib安ctrl V进行粘贴 然后右键这个lib 找到添加为库 我的idea好像没有选择 只有添加为模块 点…
阅读更多...
【LeetCode: 455. 分发饼干 + 贪心】

【LeetCode: 455. 分发饼干 + 贪心】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
2024/4/1—力扣—最小高度树

2024/4/1—力扣—最小高度树

代码实现&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ struct TreeNode* buildTree(int *nums, int l, int r) {if (l > r) {return NULL; // 递归出口}struct…
阅读更多...
【AI】ubuntu 22.04 本地搭建Qwen-VL 支持图片识别的大语言模型 AI视觉 【2】 4060ti 16G 也顶不住

【AI】ubuntu 22.04 本地搭建Qwen-VL 支持图片识别的大语言模型 AI视觉 【2】 4060ti 16G 也顶不住

接上篇 【AI】ubuntu 22.04 本地搭建Qwen-VL 支持图片识别的大语言模型 AI视觉-CSDN博客 迁移到4060ti 16G 环境下&#xff0c;仍然报错&#xff0c;显存不足&#xff01;
阅读更多...
一切皆是为了交流-DDD通用语言

一切皆是为了交流-DDD通用语言

通用语言是什么&#xff1f; 通用语言是一种在特定领域内的沟通方式&#xff0c;可以由文字、语言、手势、图像等一切与达到沟通目的的元素组成。 比如&#xff0c;在中国内&#xff0c;方言是闽南的小王与方言是粤语的小张进行交流&#xff0c;那么&#xff0c;普通话是他们…
阅读更多...
汇编基础----mov基本操作

汇编基础----mov基本操作

汇编基础----mov基本操作 下载VS2022 这个网上教程很多,自行下载安装即可 新建项目 选择空项目,如何点击下一步 在源文件下创建这二个文件 修改配置使asm文件能被解析,右击项目名(demo)->生成依赖项->生成自定义->勾选如下图所示选项->确定 立即数寻址 main…
阅读更多...
N5171B是德科技N5171B信号发生器

N5171B是德科技N5171B信号发生器

181/2461/8938产品概述&#xff1a; N5171B EXG 射频模拟信号发生器具有最佳的 EXG&#xff0c;旨在满足您对组件参数测试和接收器校准的信号需求。其出色的硬件性能可提供更快的吞吐量、更长的正常运行时间以及极好的准确性和可重复性。 Agilent / HP N5171B EXG 射频模拟信…
阅读更多...
vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户

vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户

1.后端返回的json数据结构为&#xff1a; {"message":"下载失败&#xff0c;下载文件不存在&#xff0c;请联系管理员处理&#xff01;","code":500} 2.vue 请求后台接口返回的 Blob数据 3.问题出现的原因是&#xff0c;正常其他数据列表接口&…
阅读更多...
MySQL操作DML

MySQL操作DML

目录 1.概述 2.插入 3.更新 4.删除 5.查询 6.小结 1.概述 数据库DML是数据库操作语言&#xff08;Data Manipulation Language&#xff09;的简称&#xff0c;主要用于对数据库中的数据进行增加、修改、删除等操作。它是SQL语言的一部分&#xff0c;用于实现对数据库中数…
阅读更多...
基于wsl的Ubuntu20.04上安装桌面环境

基于wsl的Ubuntu20.04上安装桌面环境

在子系统Ubuntu20.04上安装桌面环境 1. 更换软件源 由于Ubuntu默认的软件源在国外&#xff0c;有时候后可能会造成下载软件卡顿&#xff0c;这里我们更换为国内的阿里云源&#xff0c;其他国内源亦可。 双击打开Ubuntu20.04 LTS图标&#xff0c;在命令行中输入 # 备份原来的软…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023