SignalR javascript 客户端

最新推荐文章于 2024-04-22 23:33:33 发布

iml6yu

最新推荐文章于 2024-04-22 23:33:33 发布

阅读量1.8k

点赞数 1

分类专栏： html5 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/iml6yu/article/details/131300623

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

前提
环境
包
开始撸代码
结束语

前提

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

环境

html+js
cdnjs.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>
<html>
<head>
    <script src="public/cdnjs.cloudflare.com_ajax_libs_microsoft-signalr_7.0.7_signalr.js" charset="utf-8"></script>
    <meta charset="utf-8" />
    <title>signal_demo</title>
    <script>
        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);
            }
        }
    </script>
</head>
<body>
    <button onclick="sendMessage()">测试发送消息</button>
</body>
</html>

目录结构

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

iml6yu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SignalR javascript 客户端

本文仅仅介绍如何通过使用signalRjs的库如何实现客户端，关于重连机制，服务端如何实现等不会介绍，如果需要知道服务端如何实现，请查看另外一篇文章。这里使用invoke的方法调用服务端的方法，第一个参数就是服务端的方法名，可以理解成controller的action（实际不是）通过上面的on函数，实现绑定服务端发过来的消息进行处理，因为服务端发送消息是包含一个函数名，也就是这边js中的。到此为止客户端的demo已经搭建完成。"接收到报警信息："
复制链接

扫一扫