SignalR javascript 客户端

您所在的位置：网站首页 › js调用客户端 › SignalR javascript 客户端

SignalR javascript 客户端

2023-06-24 10:30| 来源: 网络整理| 查看: 265

文章目录前提环境包开始撸代码创建html 添加js引用创建连接对象处理服务端发过来的消息调用服务端的方法完整代码目录结构结束语

前提

本文仅仅介绍如何通过使用signalRjs的库如何实现客户端，关于重连机制，服务端如何实现等不会介绍，如果需要知道服务端如何实现，请查看另外一篇文章NetCore_signalR服务端

环境 html+jscdnjs.cloudflare.com_ajax_libs_microsoft-signalr_7.0.7_signalr.js 包

https://www.npmjs.com/package/@microsoft/signalr

npm install @microsoft/signalr # or yarn add @microsoft/signalr 开始撸代码创建html 添加js引用创建连接对象 const connection = new signalR.HubConnectionBuilder() .withUrl("/sr/warning_broadcast") .configureLogging(signalR.LogLevel.Information) .build(); 处理服务端发过来的消息 connection.on("ReceiveMessage", (user, message) => { console.log({ user, message }) }); connection.on("WarningMessage", (user, message) => { console.error("接收到报警信息：" + message) });

通过上面的on函数，实现绑定服务端发过来的消息进行处理，因为服务端发送消息是包含一个函数名，也就是这边js中的

"ReceiveMessage" 或者 "WarningMessage"

调用服务端的方法 async function sendMessage() { try { await connection.invoke("SendMessage", "Temp", "123123123"); } catch (err) { console.error(err); } }

这里使用invoke的方法调用服务端的方法，第一个参数就是服务端的方法名，可以理解成controller的action（实际不是）

完整代码 DOCTYPE html> signal_demo const connection = new signalR.HubConnectionBuilder() .withUrl("/sr/warning_broadcast") .configureLogging(signalR.LogLevel.Information) .build(); async function start() { try { await connection.start(); console.log("SignalR Connected."); } catch (err) { console.log(err); setTimeout(start, 5000); } }; connection.onclose(async () => { await start(); }); connection.on("ReceiveMessage", (user, message) => { console.log({ user, message }) }); connection.on("WarningMessage", (user, message) => { console.error("接收到报警信息：" + message) }); // Start the connection. start(); async function sendMessage() { try { await connection.invoke("SendMessage", "Temp", "123123123"); } catch (err) { console.error(err); } } 测试发送消息目录结构 public（目录） cdnjs.cloudflare.com_ajax_libs_microsoft-signalr_7.0.7_signalr index.html 结束语

到此为止客户端的demo已经搭建完成

https://learn.microsoft.com/zh-cn/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

【本文地址】

SignalR javascript 客户端

SignalR javascript 客户端

今日新闻

推荐新闻