栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > C/C++/C#

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

C/C++/C# 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

这个例子只是在官方的例子上加了 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, "&").replace(//g, ">");    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
    {        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("/chatHub"); });

            app.UseMvc();
        }

 

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

 

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

 

1 进入聊天室:

 

2 也进入聊天室

 

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

原文出处: https://www.cnblogs.com/refuge/p/10246411.html  

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/231000.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号