深蓝互联专注深圳物联网方案开发定制、小程序开发、SaaS系统、APP开发和深圳软硬件方案公司欢迎咨询邮箱:wisepu@szdbi.com   电话:13530005652   联系我们   |   网站地图   



微信小程序与AspNetCore SignalR聊天实例

来源:     发布:     点击:

微信小程序与aspnetcore signalr实例

本文不对小程序与signalr做任何介绍,默认读者已经掌握

aspnetcore Signalr文档
小程序文档

写在之前

SignalR没有提供小程序使用的客户端js,所以本人参考signlar.js写了小程序版signalr-client.js 代码开源,地址 https://github.com/liangshiw/SignalRMiniProgram-Client

先上效果图

开始编码

首先需要创建一个aspnetcore的mvc项目,创建完成后我们需要安装signalr的包

 Install-Package Microsoft.AspNetCore.SignalR

现在就可以创建hub集线器了,首先定义一个类来描述已在线的用户,它需要头像和姓名

public class OnlineClient
{
   public string NickName { get; set; }

   public string Avatar { get; set; }
}

接下来我们在连接创建时,把当前用户做为在线用户添加到字典中,向该用户发送加入成功的系统消息。并且同时向其他的用户发送系统消息

public override async Task OnConnectedAsync()
{
    var http = Context.GetHttpContext();

    var client = new OnlineClient()
    {
         NickName = http.Request.Query["nickName"],
         Avatar = http.Request.Query["avatar"]
    };

    lock (SyncObj)
    {
        OnlineClients[Context.ConnectionId] = client;
    }

    await base.OnConnectedAsync();
    await Groups.AddToGroupAsync(Context.ConnectionId, ChatName);
    await Clients.GroupExcept(ChatName, new[] { Context.ConnectionId }).SendAsync("system", $"用户{client.NickName}加入了群聊");
    await Clients.Client(Context.ConnectionId).SendAsync("system", $"成功加入{ChatName}");

 }

同样在用户断开连接时做离线处理

public override async Task OnDisconnectedAsync(Exception exception)
{

    await base.OnDisconnectedAsync(exception);

    bool isRemoved;
    OnlineClient client;
    lock (SyncObj)
    {
        isRemoved = OnlineClients.TryRemove(Context.ConnectionId, out client);


    }
    await Groups.RemoveFromGroupAsync(Context.ConnectionId, ChatName);

    if (isRemoved)
    {
        await Clients.GroupExcept(ChatName, new[] { Context.ConnectionId }).SendAsync("system", $"用户{client.NickName}退出了群聊");
    }

}  

下面就只有一个简单的发送消息方法了,首先查看当前用户是否在线并做相应处理,如果在线就把当前用户的消息和头像姓名一起发送给组中的其他客户端

 public async Task SendMessage(string msg)
{
    var client = OnlineClients.Where(x => x.Key == Context.ConnectionId).Select(x=>x.Value).FirstOrDefault();
    if (client == null)
    {
        await Clients.Client(Context.ConnectionId).SendAsync("system", "您已不在聊天室,请重新加入");
    }
    else
    {
        await Clients.GroupExcept(ChatName, new[] { Context.ConnectionId }).SendAsync("receive", new { msg, nickName = client.NickName, avatar = client.Avatar });

    }
}

在小程序中,我们需要在页面加载事件中创建与signalr的连接,并且注册system系统消息与receive用户消息两个方法以接收服务端发来的消息

onLoad: function (options) {
  
    this.hubConnect = new Hub.HubConnection();

    this.hubConnect.start("https://chat.jingshonline.net/chat", { nickName: app.globalData.userInfo.nickName, avatar: app.globalData.userInfo.avatarUrl });
    this.hubConnect.onOpen = res => {
      console.log("成功开启连接")
    }

    this.hubConnect.on("system", res => {
      wx.showModal({
        title: '系统消息',
        content: res,
      })
    })

    this.hubConnect.on("receive", res => {
      centendata.push({
        content: res.msg,
        time: new Date().toLocaleString(),
        head_owner: res.avatar,
        is_show_right: 0
      });
      this.setData({
        centendata: centendata
      })
    })
  }

同样在页面销毁时应断开与signalr服务器的连接

onUnload: function () {
  this.hubConnect.close({ reason: "退出" })
}

发送方法也非常简单,只需要调用sendMessage方法并把用户输入的消息传入就大功告成了,其它就是页面上的处理了

this.hubConnect.send("sendMessage",message);

完整的代码请去github https://github.com/liangshiw/SignalRMiniProgram-Client/tree/master/sample
需要注意的是在打开小程序代码时,请修改project.config.json文件中的appid,如果项目不错的话还请大家加个星,顺便再follow一下本人

深蓝互联成立于2013年,是一家物联网硬件开发及软件应用服务商,获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年,擅长SaaS 平台开发、APP小程序开发、软硬件结合开发,在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。

 

我们拥有专业优秀的设计和技术团队,以极具创意的 UI 设计、精湛卓越的开发技术,专业的网络策划团队。公司多年来投入打造物联网SaaS平台,集成了公司研发的多款智能物联网终端(智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等)。

 

公司一直坚持以研发为导向,打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务!

 

文章来自深蓝互联http://www.szdbi.com/WEBkaifajishu/400.html转载请注明出处!

相关文章

无相关信息


深圳市龙华新区龙观西路2号宝龙大厦A903(与布龙路交汇处)