.NetCore 3.x Signalr JavaScript客户端使用

最新推荐文章于 2023-09-24 16:40:49 发布

原创

最新推荐文章于 2023-09-24 16:40:49 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍如何在JavaScript客户端上使用SignalR进行实时通信。包括安装SignalR客户端包、引入JavaScript客户端、连接到集线器中心及效果展示。通过实例演示了如何在网页上实现即时消息传递。

文章目录

在尝试.NetCore 3.x SignalR文章中我已经介绍了如何使用signalr，本篇文章就对javascrip客户端做一个简单的示例。

1、安装 SignalR 客户端包

在我的项目中使用libman包管理器进行安装@microsoft/signalr包
在这里插入图片描述
当我安装完成后使用VS编译时TypeScript编译不过，这时需要安装Microsoft.TypeScript.MSBuild，安装后还是有错误编译不过，需要对项目属性进行设置以及VS选项设置。

这时编译的时候还是有错，结果瞎捣鼓半天结果是没有初始化npm install，@microsoftsignalr存在其他包依赖，所以需要npm或yarn安装。

使用libman包管理器安装后会出现一个package.json文件，定位到该目录安装。

npm install

在这里插入图片描述
到这里项目终于就编译成功了，可以继续撸我们的javascrip客户端代码了

2、引入SignalR JavaScript 客户端

这里根据需要引入，import、CommonJS 、< Script>等，我这里直接< Script>引入。

<script src="~/lib/signalr/dist/browser/signalr.js"></script>

3、连接到集线器中心

<script type="text/javascript">
    window.onload = function () {
   
   
        const userid = this.prompt('请输入你的名字')
        // 为后期做扩展
        const user = {
   
   
            userId: userid,
            groupName: 'cygroup',
            ip: '127.0.0.1'
        }
        if (user.userId) {
   
   
            setTimeout(() => {
   
   
                const url = `https://localhost:5001/notify?groupId=${
     
     user.groupName}&userId=${
     
     user.userId}&ip=