在ASP.NET Core 2.1 下使用SignalR 1.0构建最简单的实时聊天（附可运行的实例源码）

前言

Hi，大家好！前不久.NET Core2.1发布了，SignalR也发布了1.0正式版。今天我就来写一个简单的教程教大家如何构建一个简单的在线实时聊天页。

PS:关于SignalR的介绍和说明具体就不在这说明了，论坛或者官方网都有详细说明。 

使用VS2017创建ASP.NET Core Web应用程序         

•   选择新建 ASP.NET Core Web网站，选择ASP.NET Core 2.1 

                        

   以上第一步操作已经完成。

创建HTML页面             

• 在第一个步骤完成后，我们在wwwroot中创建一个名为:"chat"的HTML页面

 

 

 

为项目安装SignalR 组件

•     在Nuget包管理上搜索：Microsoft.AspNetCore.SignalR 安装

   

 

配置 SignalR 集线器，创建一个Hub类并编写相关服务和设置路由

• 创建一个MyChatHub类，并继承Microsoft.AspNetCore.SignalR命名空间中的Hub类。
• 为其编写一个Send（消息发送）方法，并重载连接和断开连接方法
• 添加服务
• 设置SignalR的路由

• 创建一个MyChatHub类，并继承Microsoft.AspNetCore.SignalR命名空间中的Hub类。

 

• 为其写一个消息发送方法，并重载连接和断开连接方法

 

完成上述操作后到Startup中进行以下操作：

• 添加服务：

services.AddSignalR();

 

 

 

 

• 设置 SignalR 的路由

 app.UseSignalR(route =>
            {
                route.MapHub("/myChathub");
            });

 

 

 

 

 

安装并使用 SignalR JavaScript 客户端

• 获得signalr.js
• 在页面上引入

ps:signalr.js可以到npm获取

• 获得signalr.js
• 现在最简便的方法是在你的“解决方案资源管理器”中右键项目选择“添加”->“客户端”，“provide：”里选择“unpkg”；“library :”里输入@aspnet/signalr@1 然后选择你想要的版本 勾选特定文件 在dist/browser勾选js就可以得到了

以上获取方式来自-----2018.11.13官方文档

• 在页面上引入

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/myChatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();
connection.start().catch(err => console.error(err.toString()));

 

从Hub中接收消息

• 因为要从定义的Hub中接收消息，我们需要定义一个方法使用connection.on方法。（可以看作是类似于AJAX中done(data)返回的数据，或者说看成要接收后台回传的数据）

• 在我们的项目中, 方法名称为 SendMessage。

 connection.on("SendMessage", (user, message) => {
            const encodedMsg = user + " 说：" + message;
            const li = document.createElement("li");
            li.textContent = encodedMsg;
            document.getElementById("messagesList").appendChild(li);
            document.getElementById('message').value = null;
        });

从客户端中调用Hub的方法

JavaScript 客户端调用Hub中的公共方法需要使用connection.invoke invoke方法接受两个参数：

• Hub中方法的名称：
• Hub中方法定义的任何的参数：

 

• 在我们的项目中定义方法名称为SendMessage，参数只有用户名和消息。

 connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));

JavaScript代码截图：

• 接下来对着chat.HTML右键启用浏览器浏览看看效果吧：

最终效果：

我们打开两个不同的浏览器进行测试

完整源码下载地址：https://github.com/Andilie/SignalR-Project/tree/master/SignalR-Beginners

 现在已经转移至此： https://github.com/Andilie/SignalR-Project/tree/master/SignalR-Beginners-old