微信小程序與AspNetCore SignalR聊天實例代碼
微信小程序與aspnetcore signalr實例
本文不對小程序與signalr做任何介紹,默認讀者已經(jīng)掌握
寫在之前
SignalR沒有提供小程序使用的客戶端js,所以本人參考signlar.js寫了小程序版signalr-client.js 代碼開源，地址 https://github.com/liangshiw/SignalRMiniProgram-Client
先上效果圖
開始編碼
首先需要創(chuàng)建一個aspnetcore的mvc項目，創(chuàng)建完成后我們需要安裝signalr的包
Install-Package Microsoft.AspNetCore.SignalR
現(xiàn)在就可以創(chuàng)建hub集線器了,首先定義一個類來描述已在線的用戶,它需要頭像和姓名
public class OnlineClient
{
public string NickName { get; set; }
public string Avatar { get; set; }
}
接下來我們在連接創(chuàng)建時，把當前用戶做為在線用戶添加到字典中,向該用戶發(fā)送加入成功的系統(tǒng)消息。并且同時向其他的用戶發(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}");
}
同樣在用戶斷開連接時做離線處理
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}退出了群聊");
}
}
下面就只有一個簡單的發(fā)送消息方法了,首先查看當前用戶是否在線并做相應處理,如果在線就把當前用戶的消息和頭像姓名一起發(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", "您已不在聊天室,請重新加入");
}
else
{
await Clients.GroupExcept(ChatName, new[] { Context.ConnectionId }).SendAsync("receive", new { msg, nickName = client.NickName, avatar = client.Avatar });
}
}
在小程序中，我們需要在頁面加載事件中創(chuàng)建與signalr的連接，并且注冊system系統(tǒng)消息與receive用戶消息兩個方法以接收服務端發(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
})
})
}
同樣在頁面銷毀時應斷開與signalr服務器的連接
onUnload: function () {
this.hubConnect.close({ reason: "退出" })
}
發(fā)送方法也非常簡單,只需要調(diào)用sendMessage方法并把用戶輸入的消息傳入就大功告成了，其它就是頁面上的處理了
this.hubConnect.send("sendMessage",message);
完整的代碼請去github https://github.com/liangshiw/SignalRMiniProgram-Client/tree/master/sample
需要注意的是在打開小程序代碼時，請修改project.config.json文件中的appid。
總結
以上所述是小編給大家介紹的微信小程序與AspNetCore SignalR聊天實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Java的Spring框架中bean的繼承與內(nèi)部bean的注入
這篇文章主要介紹了Java的Spring框架中bean的繼承與內(nèi)部bean的注入,Spring框架是Java的SSH三大web開發(fā)框架之一,需要的朋友可以參考下2015-12-12
Maven配置倉庫、阿里云鏡像、環(huán)境變量(史上最全)
本文主要介紹了Maven配置倉庫、阿里云鏡像、環(huán)境變量,文中通過圖文示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
這篇文章主要介紹了springmvc模式下的上傳和下載實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
Java的接口調(diào)用時的權限驗證功能的實現(xiàn)
這篇文章主要介紹了Java的接口調(diào)用時的權限驗證功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要給大家介紹了關于spring cloud學習教程之config修改配置的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09
在項目開發(fā)中，一般文件存儲很少再使用SFTP服務，但是也不排除合作伙伴使用SFTP來存儲項目中的文件或者通過SFTP來實現(xiàn)文件數(shù)據(jù)的交互，這篇文章主要介紹了Java集成FTP與SFTP連接池2023-02-02
教你使用eclipse?搭建Swt?環(huán)境的全過程
本文給大家分享使用eclipse?搭建Swt?環(huán)境的全過程，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了JPA save()方法將字段更新為null的解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
Java開發(fā)者必備10大數(shù)據(jù)工具和框架
這篇文章主要為大家詳細介紹了Java開發(fā)者必備10大數(shù)據(jù)工具和框架，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要給大家介紹了關于Java創(chuàng)建、識別條形碼和二維碼的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Java具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09