ASP.NET Core 2.2 基础知识(十七) SignalR 一个极其简陋的聊天室

时间:2019-01-09 20:04:53 来源:互联网 作者: 神秘的大神 字体:

这是一个极其简陋的聊天室!

这个例子只是在官方的例子上加了 Group 的用法而已,主要是官方给的 Group 的例子就两行代码,看不出效果.

第一步:修改 chat.js

"use strict";  //创建一个连接 var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();  //定义客户端的 ReceiveMessage 方法 connection.on("ReceiveMessage", function (user, message) {     var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");     var encodedMsg = user + " says " + msg;     var li = document.createElement("li");     li.textContent = encodedMsg;     document.getElementById("messagesList").appendChild(li); });  //给"Send Message"按钮添加点击事件 document.getElementById("sendButton").addEventListener("click", function (event) {     var user = document.getElementById("userInput").value;     var message = document.getElementById("messageInput").value;      //调用服务端的 SendMessage 方法     connection.invoke("SendMessage", user, message).catch(function (err) {         return console.error(err.toString());     });     event.preventDefault(); });  //给"进入聊天室"按钮添加点击事件 document.getElementById("goChatRoom").addEventListener("click", function () {     goChatRoom();//开启连接     document.getElementById("outChatRoom").style.display = "block";     this.style.display = "none"; });  //给"退出聊天室"按钮添加点击事件 document.getElementById("outChatRoom").addEventListener("click", function () {     outChatRoom();//关闭连接     this.style.display = "none";     document.getElementById("goChatRoom").style.display = "block"; });  //开启连接 function goChatRoom() {     connection.start().catch(function (err) {         return console.error(err.toString());     }); }  //关闭连接 function outChatRoom() {     connection.stop(); }

 

第二步:定义强类型中心

    public interface IChatClient     {         //就算是这种强类型方式,客户端定义的方法名也必须和这个方法名一样,包括签名.         Task ReceiveMessage(string user, string message);     }      public class StronglyTypedChatHub : Hub<IChatClient>     {         public async Task SendMessage(string user, string message)         {             //向所有连接的客户端中,在 "room" 小组的客户端发送消息             await Clients.Group("room").ReceiveMessage(user, message);         }          public override async Task OnConnectedAsync()         {             //当客户端连接上后,将其归属到 "room" 小组.             await Groups.AddToGroupAsync(Context.ConnectionId, "room");             await base.OnConnectedAsync();         }          public override async Task OnDisconnectedAsync(Exception exception)         {             //当客户端断开连接后,将其从 "room" 小组移除,一定要移除!不然会发送多条消息!!!!             await Groups.RemoveFromGroupAsync(Context.ConnectionId, "room");             await base.OnDisconnectedAsync(exception);         }     }

 

第三步:注册 SignalR 服务,添加路由

        public void ConfigureServices(IServiceCollection services)         {             ......             services.AddSignalR();             ......         }

 

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)         {             ......             app.UseSignalR(routes => { routes.MapHub<StronglyTypedChatHub>("/chatHub"); });              app.UseMvc();         }

 

第四步:下载 singalr.js (略,可参照官方文档)

 

效果:

在没有进入聊天室的时候,点击 "Send Message" 是没有效果的:

 

1 进入聊天室:

 

2 也进入聊天室

 

其实我觉得用这个 Group 的概念,可以实现多个聊天室功能.