用signalr实现简单的网页实时聊天

开发工具与关键技术： js

作者：GuanLW

撰写时间：2022/3/18

第一步：先在vs的NuGet包中下载安装Microsoft.AspNet.SignalR。安装完成后会多以下几个文件

第二步：右键项目->新建项，选择signalr集线器类，并写入代码，namespace与类名记得改成实际类名

如下：

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;



namespace webLoans

{

    [HubName("msgHub")]//客户端调用，首字母要小写

    public class MsgHub : Hub

    {

        //在hub中编写的方法，都是要被客户端调用的方法

        [HubMethodName("sendMsg")]//客户端调用，首字母要小写

        public void SendMsg(string name, string txt)

        {

            //服务器主动调用客户端的方法，即客户端必须有getMsg方法

            Clients.All.getMsg(name, txt);

        }

    }

}

第三步：右键项目，新建普通类Startup.cs

如下：

using Microsoft.Owin;

using Owin;

using System;

using System.Threading.Tasks;



[assembly: OwinStartup(typeof(webLoans.Startup))]



namespace webLoans

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888

            app.MapSignalR();

        }

    }

}

这时可以先测试一下，运行项目，在网页中输入地址https://localhost:44340/signalr/hubs，注意填入实际端口号。网页显示部分内容如下：

第四步：编写html页面，代码如下：

@{

    Layout = null;

}











    

    

    //实际的路径

    //实际的路径

    //动态生成的

    





    



    

    

    登录

    

    发送消息

注意头部引用的脚本，前两个是你的项目中的实际脚本文件，最后一个是在运行时动态生成的，实际使用时需要修改前两个。

第五步：打开两个网页进行测试，效果如下：

先输入登录名，然后发送信息即可。可以实时聊天。

这是我所学到的一些知识，在此分享给大家，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！