国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

后端C# .net 前端uni-app 集成SignalR做即時通訊

這篇具有很好參考價值的文章主要介紹了后端C# .net 前端uni-app 集成SignalR做即時通訊。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

????????后端集成SignalR比較簡單,首先要在解決方案中依賴幾個SignalR的庫,SignalR的庫就是做即時通訊的主要庫,我們建立連接、收發(fā)信息都需要用這個庫來進行。uniapp signalr,uni-app

????????除了這幾個庫以外,還要還有幾個依賴庫要一并依賴進來。

uniapp signalr,uni-app

? ? ? ? Owin庫的作用主要是為了在項目StartUp時將SignalR庫的幾個Hub文件注冊起來,Hub文件就相當于是我們接口中的Controller文件。

uniapp signalr,uni-app

? ? ? ? 然后在項目下創(chuàng)建一個文件夾Hubs,Hubs下創(chuàng)建文件ChatHub

using Common.Log;
using Microsoft.Ajax.Utilities;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using WebGrease;
using WinexHK.Hubs.ConectionOperate;

namespace WinexHK.Hubs
{
? ? /// <summary>
? ? /// ChatHub
? ? /// </summary>
? ? public class ChatHub : PersistentConnection
? ? {
? ? ? ? private ConnectionManagement summaryTableCon = new ConnectionManagement();

? ? ? ? /// <summary>
? ? ? ? /// 連接成功后調(diào)用
? ? ? ? /// </summary>
? ? ? ? /// <param name="request"></param>
? ? ? ? /// <param name="connectionId"></param>
? ? ? ? /// <returns></returns>
? ? ? ? protected override Task OnConnected(IRequest request, string connectionId)
? ? ? ? {
? ? ? ? ? ? //獲得SignalR的連接id
? ? ? ? ? ? var connid = connectionId;
? ? ? ? ? ? //獲得用戶id
? ? ? ? ? ? var userid = "123321";
? ? ? ? ? ? Console.Write($"【{connid}】:已建立連接!");

? ? ? ? ? ? //判斷一下用戶是不是已經(jīng)鏈接了
? ? ? ? ? ? var checkUserConn = summaryTableCon.IsConn(connid, userid);
? ? ? ? ? ? if (!checkUserConn)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? //添加一個新的連接
? ? ? ? ? ? ? ? summaryTableCon.AddConnInfo(new SignalRConn()
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? UserId = userid,
? ? ? ? ? ? ? ? ? ? ConnectionId = connid
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? //更新連接
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? summaryTableCon.UpdateConnInfo(userid, connid);
? ? ? ? ? ? }

? ? ? ? ? ? return Connection.Send(connectionId, $"【用戶:{connectionId}】真正連接成功!");
? ? ? ? ? ? //return base.OnConnected(request, connectionId);
? ? ? ? }

? ? ? ? /// <summary>
? ? ? ? /// 接收到請求的時候調(diào)用
? ? ? ? /// </summary>
? ? ? ? /// <param name="request"></param>
? ? ? ? /// <param name="connectionId"></param>
? ? ? ? /// <param name="data"></param>
? ? ? ? /// <returns></returns>
? ? ? ? protected override async Task OnReceived(IRequest request, string connectionId, string data)
? ? ? ? {
? ? ? ? ? ? var keys = new Dictionary<string, string>
? ? ? ? ? ? {
? ? ? ? ? ? ? ? { "葡萄酒", "wine" },
? ? ? ? ? ? ? ? { "紅酒", "wine" },
? ? ? ? ? ? ? ? { "白酒", "wine" },
? ? ? ? ? ? ? ? { "霞多麗", "grapery" },
? ? ? ? ? ? ? ? { "雷司令", "grapery" }
? ? ? ? ? ? };

? ? ? ? ? ? var values = new Dictionary<string, string>
? ? ? ? ? ? {
? ? ? ? ? ? ? ? { "wine", "這是一款葡萄酒" },
? ? ? ? ? ? ? ? { "grapery", "這是一串葡萄" }
? ? ? ? ? ? };

? ? ? ? ? ? //獲得用戶id
? ? ? ? ? ? var userid = "123321";
? ? ? ? ? ? await Task.Factory.StartNew(async () =>
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var key = "";
? ? ? ? ? ? ? ? for (int i = 0; i < keys.Keys.Count; i++)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if (data.Contains(keys.Keys.ToList()[i]))
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? key = keys.Values.ToList()[i];
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var value = "未找到匹配條目";
? ? ? ? ? ? ? ? if (values.ContainsKey(key))
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? value = values[key];
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? await Connection.Send(connectionId, value);
? ? ? ? ? ? }, TaskCreationOptions.LongRunning);
? ? ? ? }

? ? ? ? /// <summary>
? ? ? ? /// 連接中斷的時候調(diào)用
? ? ? ? /// </summary>
? ? ? ? /// <param name="request"></param>
? ? ? ? /// <param name="connectionId"></param>
? ? ? ? /// <param name="stopCalled"></param>
? ? ? ? /// <returns></returns>
? ? ? ? protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled)
? ? ? ? {
? ? ? ? ? ? Console.Write($"【{connectionId}】:已斷開連接!");
? ? ? ? ? ? //獲得SignalR的連接id
? ? ? ? ? ? var connid = connectionId;
? ? ? ? ? ? //關閉連接
? ? ? ? ? ? summaryTableCon.DelConnInfo(connid);
? ? ? ? ? ? return base.OnDisconnected(request, connectionId, stopCalled);
? ? ? ? }

? ? ? ? /// <summary>
? ? ? ? /// 連接超時重新連接的時候調(diào)用
? ? ? ? /// </summary>
? ? ? ? /// <param name="request"></param>
? ? ? ? /// <param name="connectionId"></param>
? ? ? ? /// <returns></returns>
? ? ? ? protected override Task OnReconnected(IRequest request, string connectionId)
? ? ? ? {
? ? ? ? ? ? return base.OnReconnected(request, connectionId);
? ? ? ? }
? ? }
}

? ? ? ? 文件里有幾個回調(diào)方法,OnConnected用戶連接時,OnReceived收到信息時、OnDisconnected用戶斷開連接,OnReconnected用戶重連,也可以通過Connection.Send方法給連接用戶發(fā)送消息。

? ? ? ? 下面是Hub里用到的用到的ConnectionManagement的代碼,用來保存并管理用戶的連接狀態(tài)。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WinexHK.Hubs.ConectionOperate
{
? ? /// <summary>
? ? /// 連接管理
? ? /// </summary>
? ? public class ConnectionManagement
? ? {
? ? ? ? /// <summary>
? ? ? ? /// 用戶連接集合
? ? ? ? /// </summary>
? ? ? ? public static List<SignalRConn> SignalRConns { get; set; } = new List<SignalRConn>();

? ? ? ? /// <summary>
? ? ? ? /// 添加連接
? ? ? ? /// </summary>
? ? ? ? /// <param name="conn"></param>
? ? ? ? public void AddConnInfo(SignalRConn conn)
? ? ? ? {
? ? ? ? ? ? SignalRConns.Add(conn);
? ? ? ? }

? ? ? ? /// <summary>
? ? ? ? /// 刪除連接
? ? ? ? /// </summary>
? ? ? ? /// <param name="connid"></param>
? ? ? ? public void DelConnInfo(string connid)
? ? ? ? {
? ? ? ? ? ? var signalRConns = SignalRConns.FirstOrDefault(u => u.ConnectionId == connid);
? ? ? ? ? ? if (signalRConns != null)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? SignalRConns.Remove(signalRConns);
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? /// <summary>
? ? ? ? /// 更新鏈接(老的鏈接不起作用了)
? ? ? ? /// 場景:客戶端重連了,userid沒變,但是connid變了
? ? ? ? /// </summary>
? ? ? ? /// <param name="userId">用戶id</param>
? ? ? ? /// <param name="newConnsId">新的鏈接id</param>
? ? ? ? public void UpdateConnInfo(string userId, string newConnsId)
? ? ? ? {
? ? ? ? ? ? var signalRConns = SignalRConns.FirstOrDefault(u => u.UserId.ToLower() == userId.ToLower());
? ? ? ? ? ? if (signalRConns != null)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? signalRConns.ConnectionId = newConnsId;
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? /// <summary>
? ? ? ? /// 判斷用戶是否已經(jīng)鏈接
? ? ? ? /// </summary>
? ? ? ? /// <param name="connid">連接id</param>
? ? ? ? /// <param name="userid">用戶id</param>
? ? ? ? /// <returns></returns>
? ? ? ? public bool IsConn(string connid, string userid)
? ? ? ? {
? ? ? ? ? ? var userConn = SignalRConns.FirstOrDefault(u => u.ConnectionId.ToLower() == connid.ToLower() && u.UserId.ToLower() == userid.ToLower());
? ? ? ? ? ? return userConn == null ? false : true;
? ? ? ? }
? ? }
}

? ? ? ? 最后是用到的一個類,保存用戶id及連接id

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WinexHK.Hubs.ConectionOperate
{
? ? /// <summary>
? ? /// 連接
? ? /// </summary>
? ? public class SignalRConn
? ? {
? ? ? ? /// <summary>
? ? ? ? /// 系統(tǒng)用戶id
? ? ? ? /// </summary>
? ? ? ? public string UserId { get; set; }

? ? ? ? /// <summary>
? ? ? ? /// SignleR鏈接Id(每次鏈接SignalR都會分配一個id)
? ? ? ? /// </summary>
? ? ? ? public string ConnectionId { get; set; }
? ? }
}

? ? ? ? 這幾個類定義好,基本上后端的代碼就完成了,然后開始做前端部分。前端部分分兩個版本,一個是PC版的網(wǎng)頁,一個是uni-app版的網(wǎng)頁,由于uni-app對于SignalR框架的適配性不好,我們暫時先不開發(fā)微信小程序及app版的SignalR,等后面技術成熟了在進行開發(fā)。

? ? ? ? PC版跟uni-app網(wǎng)頁版比較類似,基本上依賴3個js文件就可以搞定了,頁面自己看著改改。

????????uniapp signalr,uni-app

????????一個是js的庫,版本應該都ok,不挑。一個是signalR的庫,還有一個是做聊天要用的調(diào)用方法的庫。下面是chat_hub.js的代碼

? ? ??

// 連接服務,xxxx里直接填后端的地址即可
var connection = $.connection("http://xxxx/chathub");

// 建立鏈接
connection.start(function () {
? ? //連接成功
? ? console.log("【" + new Date().toLocaleString() + "】連接成功!");
? ? //發(fā)送消息
? ? connection.send("給我一杯葡萄酒吧");
});

// 連接斷開
connection.disconnected(function () {
? ? console.log("【" + new Date().toLocaleString() + "】連接斷開!");
});

// 接收服務器發(fā)來的消息
connection.received(function (data) {
? ? console.log("【" + new Date().toLocaleString() + "】接收服務器發(fā)來的消息:");
? ? console.log(data);
});

? ? ? ? uni-app版跟PC版有些不一樣的,因為uni-app不是實時編譯運行的,所以PC的模式對uni-app并不奏效,配進去后發(fā)現(xiàn)JQuery加載不出來,SignalR的js會報錯。

? ? ? ? 解決辦法有兩步,首先在main.js中就將JQuery直接依賴上,并配進window對象中

uniapp signalr,uni-app

? ? ? ? 其次要對SignalR中所有用到JQuery的地方進行修改,所有對$的使用都要從window對象中獲取

uniapp signalr,uni-app

好比說這個地方,改之前是上面這樣的,改之后是下面這樣的

uniapp signalr,uni-app

????????這么改的原因是因為SignalR的js對于uni-app的項目來說屬于外部文件,你在uni-app項目內(nèi)全局引入的JQuery在外部js中并不生效,但window對象是通用的,所以可以在uni-app項目初始化時把JQuery對象保存在window對象中,使用的時候調(diào)window中的$即可。

????????整個文件改完基本就通了,不通你再來問我。

????????文章來源地址http://www.zghlxwxcb.cn/news/detail-854132.html

到了這里,關于后端C# .net 前端uni-app 集成SignalR做即時通訊的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • 通過.NET Core+Vue3 實現(xiàn)SignalR即時通訊功能

    通過.NET Core+Vue3 實現(xiàn)SignalR即時通訊功能

    .NET Core 和 Vue3 結合使用 SignalR 可以實現(xiàn)強大的實時通訊功能,允許實時雙向通信。在這個示例中,我們將詳細說明如何創(chuàng)建一個簡單的聊天應用程序,演示如何使用 .NET Core SignalR 后端和 Vue3 前端來實現(xiàn)實時通訊功能。 確保你已經(jīng)安裝了以下工具和環(huán)境: .NET Core Node.js Vue C

    2024年02月05日
    瀏覽(23)
  • 前端vue單個文件上傳支持圖片,壓縮包以及文件 , 下載完整代碼請訪問uni-app插件市場址:https://ext.dcloud.net.cn/plugin?id=13066

    前端vue單個文件上傳支持圖片,壓縮包以及文件 , 下載完整代碼請訪問uni-app插件市場址:https://ext.dcloud.net.cn/plugin?id=13066

    前端vue單個文件上傳支持圖片,壓縮包以及文件?, 閱讀全文下載完整代碼請關注微信公眾號: 前端組件開發(fā) 效果圖如下: 使用方法 HTML代碼部分 JS代碼 (引入組件 填充數(shù)據(jù)) CSS

    2024年02月09日
    瀏覽(27)
  • uni-app -- - - - 小程序如何向后端發(fā)送Form Data格式的數(shù)據(jù)

    uni-app -- - - - 小程序如何向后端發(fā)送Form Data格式的數(shù)據(jù)

    接口請 求方式 傳參方式 ,肯定不是一成不變的,當遇到如題需求的時候,要知道, 小程序是沒有FormData對象 的,那么該怎么操作呢??? 直接上代碼: 效果如圖: 如上所示,這樣寫起來功能實現(xiàn)了,但是看起來這代碼太不美觀了 效果如圖: 參考文章: 使用wx.request發(fā)送

    2024年02月08日
    瀏覽(15)
  • 前端-vscode中開發(fā)uni-app

    前端-vscode中開發(fā)uni-app

    node -v npm install @vue/ cli@4.5.15 -g 指定版本號:4.5.15 在自己電腦目錄下創(chuàng)建項目: demo02是自己項目名字 在D/AllCode/vs_vue2_uniapp目錄下執(zhí)行一下命令: vue create -p dcloudio/uni-preset-vue demo02 要想在vscode執(zhí)行npm命令 我們打開pages.json和manifest.json,發(fā)現(xiàn)會報紅,這是因為在json中是不能寫注

    2024年01月18日
    瀏覽(47)
  • UNI-APP 人臉識別分析及實現(xiàn)(前端)

    實現(xiàn)流程: 1、打開攝像頭——自動讀取照片——傳輸給后端——后端交由第三發(fā)或自主開發(fā)來識別——返回結果(相識度比) 2、打開攝像頭——自動讀取視頻——傳輸給后端——后端通過解析視頻,截取圖片交由第三發(fā)或自主開發(fā)來識別——返回結果(相識度比) 通過分

    2023年04月08日
    瀏覽(29)
  • uni-app從后端返回的mp4鏈接視頻截取一幀為封面

    uni-app從后端返回的mp4鏈接視頻截取一幀為封面

    一、需求: 后端返回包含視頻鏈接的數(shù)組對象,格式如下: 從上面的mp4視頻中截取一幀設置為封面,如下圖,下面的封面圖從視頻中截取而來。 二、代碼實現(xiàn): 按照上面的代碼,其中posterList就是對應的每一個視頻的封面base64數(shù)組,一切看起來都挺好,在H5正常運行,但是在

    2024年02月14日
    瀏覽(96)
  • 【uni-app】后端返回base64轉(zhuǎn)二維碼并顯示在canvas生成海報

    【uni-app】后端返回base64轉(zhuǎn)二維碼并顯示在canvas生成海報

    使用官方的 uni.getFileSystemManager().writeFile() 方法可將base64碼轉(zhuǎn)成的二維碼顯示在畫布上,代碼如下: const obj = { ?? ??? ??? ??? ??? ?page: \\\'pages/sort/goodsDetail\\\', ?? ??? ??? ??? ??? ?co_Nu: this.goodInfo.co_Nu ?? ??? ??? ??? ?} ?? ??? ??? ??? ?const _this = this ?? ???

    2024年02月11日
    瀏覽(79)
  • 微信小程序外賣跑腿點餐(訂餐)系統(tǒng)(uni-app+SpringBoot后端+Vue管理端技術實現(xiàn))

    微信小程序外賣跑腿點餐(訂餐)系統(tǒng)(uni-app+SpringBoot后端+Vue管理端技術實現(xiàn))

    自從計算機發(fā)展開始,計算機軟硬件相關技術的發(fā)展速度越來越快,在信息化高速發(fā)展的今天,計算機應用技術似乎已經(jīng)應用到了各個領域。 在餐飲行業(yè),除了外賣以外就是到店里就餐,在店里就餐如果需要等待點餐的話,用戶的體驗度就會急劇下降,很多餐飲店也開始開發(fā)

    2024年04月11日
    瀏覽(18)
  • 前端vue uni-app自定義精美海報生成組件

    前端vue uni-app自定義精美海報生成組件

    在當前技術飛速發(fā)展的時代,軟件開發(fā)的復雜度也在不斷提高。傳統(tǒng)的開發(fā)方式往往將一個系統(tǒng)做成整塊應用,一個小的改動或者一個小功能的增加都可能引起整體邏輯的修改,從而造成牽一發(fā)而動全身的情況。為了解決這個問題,組件化開發(fā)逐漸成為了一種趨勢。通過組件

    2024年02月14日
    瀏覽(32)
  • 基于.NET、Uni-App開發(fā)支持多平臺的小程序商城系統(tǒng) - CoreShop

    基于.NET、Uni-App開發(fā)支持多平臺的小程序商城系統(tǒng) - CoreShop

    小程序商城系統(tǒng)是當前備受追捧的開發(fā)領域,它可以為用戶提供一個更加便捷、流暢、直觀的購物體驗,無需下載和安裝,隨時隨地輕松使用。今天給大家推薦一個基于.NET、Uni-App開發(fā)支持多平臺的小程序商城系統(tǒng)(該商城系統(tǒng)完整開源、無封裝無加密、商用免費、支持二次

    2024年02月05日
    瀏覽(19)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包