在 ASP.NET Core 和 JavaScript 中配置 WebSocket

在本文中,我们将了解 WebSocket,并逐步讲解如何在客户端配置 WebSocket 并与服务器通信。首先,让我们先来了解一下" WebSocket "。

什么是 WebSocket

WebSocket 是一种协议,它提供了一种通过持久连接在客户端和服务器之间交换数据的方法。数据可以以"数据包"的形式双向传递,而无需断开连接或进行任何额外的 HTTP 请求。

WebSocket 在需要持续数据交换的场景中非常有用,例如在线游戏、实时交易系统等。

打开 WebSocket 连接

客户端通过称为 WebSocket 握手 的过程建立 WebSocket 连接。此过程始于客户端向服务器发送常规 HTTP 请求。该请求包含一个 Upgrade 标头,用于告知服务器客户端想要建立 WebSocket 连接。

下面是我们如何打开/创建 WebSocket 连接客户端的简单示例:

事件:套接字创建后,我们可以监听其上的事件。共有 4 个事件:

• Onopen:当建立套接字连接时发生

• Onmessage:当客户端从服务器接收数据时发生

• Onerror:当通信发生任何错误时发生

• Onclose:连接关闭时发生

方法:

• socket.send(data):使用连接传输数据

• socket.close(code, reason):终止任何现有连接

当我们调用new WebSocket(url)时 ,它会立即开始连接。

在连接期间,客户端会询问服务器:"您是否支持 Websocket?"如果服务器回答"是",则对话继续通过 WebSocket 协议进行。

通过new WebSocket(url)发出的浏览器头请求

如下:

• Origin:客户端页面的来源,例如 https://localhost:44378。WebSocket 对象本质上是跨域的。

• 连接:升级------表示客户端想要更改协议。

• 升级:websocket -- 请求的协议是"websocket"。

• Sec-WebSocket-Key:浏览器生成的随机密钥,以确保安全。

• Sec-WebSocket-Version : 13,WebSocket 协议版本。

当服务器同意切换到WebSocket时,会发送响应码101,如下所示:

握手完成后,客户端或服务器就可以开始发送数据。

通过使用 WebSocket,我们可以传输任意数量的数据,而无需承担传统 HTTP 请求带来的开销。数据以消息的形式通过 WebSocket 进行传输 。

现在我们已经详细了解了 WebSocket,让我们使用 Asp.Net MVC Core Web 应用程序创建一个示例应用程序并按照以下步骤操作:

1.打开Visual Studio 2019并使用"Asp.Net MVC Core"模板创建一个Web应用程序。

2.应用程序创建后,它将具有以下文件夹结构:

3.移动到 wwwroot\js 目录并创建一个 js 文件或打开 site.js 文件。

4.现在让我们在其中添加以下代码:

5.现在,打开 Startup.cs 文件并在其中添加以下代码:

6.现在转到 HomeController.cs 并在其中添加以下方法:

就是这样,您的第一个 WebSocket 应用程序已准备就绪,让我们构建并运行它以查看结果:

正如您在上图中所看到的,通信已经开始,我们能够发送和接收消息。

如果您喜欢此文章,请收藏、点赞、评论,谢谢,祝您快乐每一天。

相关推荐
OpsEye5 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿5 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
Hilaku7 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding7 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
不简说8 小时前
AI 帮你画模板、点一下就云打印:sv-print 这三个月都干了啥
前端·javascript·人工智能
大明二代8 小时前
从零构建 Mastra RAG MVP:DeepSeek、SiliconFlow 与 PostgreSQL/pgvector 实战
javascript·数据库·人工智能
结局无敌9 小时前
React Native for OpenHarmony 实战:三方库 react-native-paper 的鸿蒙化适配指南
javascript·人工智能·深度学习·react native·react.js·ecmascript·harmonyos
铁皮饭盒9 小时前
CPU就行, 老照片变清晰, 本地部署582mb腾讯的模型, 本地部署, 过节了给长辈们变个小魔术
前端·javascript·后端
结局无敌9 小时前
React Native for OpenHarmony 实战:三方库 react-native-progress-steps 的鸿蒙化适配指南
javascript·人工智能·深度学习·react native·react.js·harmonyos
tryCbest9 小时前
第三篇:JavaScript 基础语法全解 + TaskFlow 逻辑实现
javascript·前端知识