微信小程序與AspNetCore SignalR聊天實(shí)例代碼

更新時(shí)間：2018年08月03日 17:29:41 作者：編程夢(mèng)

這篇文章主要介紹了微信小程序與AspNetCore SignalR聊天實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

微信小程序與aspnetcore signalr實(shí)例

本文不對(duì)小程序與signalr做任何介紹,默認(rèn)讀者已經(jīng)掌握

aspnetcore Signalr文檔

小程序文檔

寫在之前

SignalR沒有提供小程序使用的客戶端js,所以本人參考signlar.js寫了小程序版signalr-client.js 代碼開源，地址 https://github.com/liangshiw/SignalRMiniProgram-Client

先上效果圖

開始編碼

首先需要?jiǎng)?chuàng)建一個(gè)aspnetcore的mvc項(xiàng)目，創(chuàng)建完成后我們需要安裝signalr的包

Install-Package Microsoft.AspNetCore.SignalR

現(xiàn)在就可以創(chuàng)建hub集線器了,首先定義一個(gè)類來描述已在線的用戶,它需要頭像和姓名

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

接下來我們?cè)谶B接創(chuàng)建時(shí)，把當(dāng)前用戶做為在線用戶添加到字典中,向該用戶發(fā)送加入成功的系統(tǒng)消息。并且同時(shí)向其他的用戶發(fā)送系統(tǒng)消息

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}");
 }

同樣在用戶斷開連接時(shí)做離線處理

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}退出了群聊");
 }
}

下面就只有一個(gè)簡(jiǎn)單的發(fā)送消息方法了,首先查看當(dāng)前用戶是否在線并做相應(yīng)處理,如果在線就把當(dāng)前用戶的消息和頭像姓名一起發(fā)送給組中的其他客戶端

 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", "您已不在聊天室,請(qǐng)重新加入");
 }
 else
 {
 await Clients.GroupExcept(ChatName, new[] { Context.ConnectionId }).SendAsync("receive", new { msg, nickName = client.NickName, avatar = client.Avatar });
 }
}

在小程序中，我們需要在頁(yè)面加載事件中創(chuàng)建與signalr的連接，并且注冊(cè)system系統(tǒng)消息與receive用戶消息兩個(gè)方法以接收服務(wù)端發(fā)來的消息

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: '系統(tǒng)消息',
 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
 })
 })
 }

同樣在頁(yè)面銷毀時(shí)應(yīng)斷開與signalr服務(wù)器的連接

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

發(fā)送方法也非常簡(jiǎn)單,只需要調(diào)用sendMessage方法并把用戶輸入的消息傳入就大功告成了，其它就是頁(yè)面上的處理了

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

完整的代碼請(qǐng)去github https://github.com/liangshiw/SignalRMiniProgram-Client/tree/master/sample
需要注意的是在打開小程序代碼時(shí)，請(qǐng)修改project.config.json文件中的appid。

總結(jié)

以上所述是小編給大家介紹的微信小程序與AspNetCore SignalR聊天實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: