SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升）

阿新 • • 發佈：2019-01-15

SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升，5個Demo貫徹全篇，感興趣的玩才是真的學）

應用情景之一：

沒太多連續的時間來研究SignalR，所以我把這篇文章分了三個階段：

第一個階段，簡單使用，熟悉並認識SignalR

第二個階段，實現上圖的單聊效果

第三個階段，實現類似QQ群發的功能

擴充套件階段，如果有時間，逆天會再開一篇，封裝一個LoTSignalR，看過逆天封裝的人都知道，絕對簡單又輕量級

比如LoTQQ，現在已經很多人在用了，後期會新增新功能，敬請期待~~

++++++++++++++++++ 我是華麗的分割線

+++++++++++++++++++++

步入正軌：

第一個階段：

1.什麼是ASP.NET SignalR？

ASP .NET SignalR是一個 ASP .NET 下的類庫，可以在ASP .NET 的Web專案中實現實時通訊。什麼是實時通訊的Web呢？就是讓客戶端（Web頁面）和伺服器端可以互相通知訊息及呼叫方法，當然這是實時操作的。

WebSockets是Html5提供的新的API，可以在Web網頁與伺服器端間建立Socket連線，當WebSockets可用時（即瀏覽器支援Html5）SignalR使用WebSockets，當不支援時SignalR將使用其它技術來保證達到相同效果。

SignalR當然也提供了非常簡單易用的高階API，使伺服器端可以單個或批量呼叫客戶端上的JavaScript函式，並且非常方便地進行連線管理，例如客戶端連線到伺服器端，或斷開連線，客戶端分組，以及客戶端授權，使用SignalR都非常容易實現。

2.可以使用ASP.NET SingalR做什麼？
SignalR 將與客戶端進行實時通訊帶給了ASP .NET 。當然這樣既好用，而且也有足夠的擴充套件性。以前使用者需要重新整理頁面或使用Ajax輪詢才能實現的實時顯示資料，現在只要使用SignalR，就可以簡單實現了。

最重要的是您無需重新建立專案，使用現有ASP .NET專案即可無縫使用SignalR。

網上某架構圖：

上面亂七八糟的估計很多人懶得看，好吧，你可以這樣理解：

使用了SignalR就可以讓客戶端通過SignalR代理直接呼叫服務端的方法，讓服務端通過SignalR直接呼叫客戶端的方法

下面我們來例項演示一下，先演示一下不用IIS的情況：

新建一個控制檯專案，引入 signalR Self Host （可以思考一下為什麼會用NuGet包，他到底好在哪？O(∩_∩)O~不清楚等專案演示完你應該就知道了）

這是他的依賴項

安裝一下Owin.Cors

依賴項：

新增一個Owin的Startup類，類似於我們傳統專案的Global檔案

註冊一下signalR中間元件（學過mvc的可以變相的理解為註冊路由之類的）

在main方法中繫結埠（不一定是8080，比如我demo中就用的其他埠）

建立一個“SignalR集線器”（控制檯這邊因為沒有集線器所以只能自己建類）

建了一個DntHub，定義了一個伺服器端的方法，叫ServiceSend（一會會用到）

轉到定義，看看Hub類（好東西啊，還有分組啥的，下面會講）

先看看共引用多少dll（和MVC之類的比起是不是簡潔很多？一會演示好處在哪）最小引用

建立一個web的Client，引用一下 SignalR的js包，其實你會發現就是多了幾個js包並沒有引用任何dll（必須的，不然豈不是太臃腫？）

前端的呼叫步驟：
    
程式碼貼起：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>簡單聊天程式</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            //日記記錄
            $.connection.hub.logging = true;

            //設定hubs的url
            $.connection.hub.url = "http://localhost:5438/signalr";

            // 宣告一個代理來引用該集線器。
            var chat = $.connection.dntHub;

            // 建立一個方法供服務端呼叫
            chat.client.addMessage = function (name, message) {
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                $('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            $('#displayname').val('路人');

            // 啟動 connection
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    //呼叫伺服器端方法
                    chat.server.serviceSend($('#displayname').val(), $('#message').val());
                });
            });
        });
    </script>
    
</body>
</html>
View Code
如果要除錯的話，保證服務端先執行，除錯小技巧：

下面說一下上面的好處：

webclient我就單獨拿出來了（一個js包，一個index.html），控制檯的程式我也單獨拿出來了，下面先執行一下服務端，再開啟index.html

再次驗證最上面說的，埠不固定

第二個階段：

QQ聊天案例，先講一種常規的方法，下面會講一種簡單方法

先看看gif效果圖把

定義一個BaseHub類，裡面用 qqModeList來臨時存放資料（使用者資料）

QQModel，目前就用到兩個屬性，其他的可以自己擴充套件

定義了一個上線方法，一會每個客戶端都會呼叫（本來是準備用OnConnected的，沒辦法他沒引數。。。而且這個時候，qq暱稱還沒有產生，於是我取其次的方案）

定義一個發訊息的方法

下面就是前端的東西了，註釋很詳細，不清楚可以直接留言，我沒高興深度封裝，主要就是簡單演示一下

程式碼貼上：

客戶端-逆天

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>仿QQ聊天--我是逆天</title>
    <link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
    <div><input id="inputMsg" /><input id="btn" type="button" value="發訊息" /></div><br /><br />
    <div id="main"></div>

    <script src="Scripts/jquery-2.2.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var leftHtml = [
                '<div class="sender">',
                '<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
                '<div><div class="left_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');

            var rightHtml = [
                '<div class="receiver">',
                '<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
                '<div><div class="right_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');

            //設定hubs的url
            $.connection.hub.url = 'http://localhost:5438/signalR';
            // 宣告一個代理
            var qqProxy = $.connection.qQHub;
            // 建立一個方法供服務端呼叫
            qqProxy.client.sendMsg = function (msg) {
                $('#main').append(leftHtml.replace('{msg}', msg));
            }
            // 啟動 connection
            $.connection.hub.start().done(function () {
                qqProxy.server.online('逆天');//QQ暱稱
                $('#btn').click(function () {
                    //獲取輸入
                    var qqmsg = $('#inputMsg').val();
                    //給逆天發訊息
                    qqProxy.server.serviceSend('妹子', qqmsg);
                    $('#main').append(rightHtml.replace('{msg}', qqmsg));
                });
            });
        });
    </script>
</body>
</html>

View Code

客戶端-美女

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>仿QQ聊天--我是美女</title>
    <link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
    <div><input id="inputMsg" /><input id="btn" type="button" value="發訊息" /></div><br /><br />
    <div id="main"></div>


    <script src="Scripts/jquery-2.2.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var rightHtml = [
                '<div class="sender">',
                '<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
                '<div><div class="left_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');

            var leftHtml = [
                '<div class="receiver">',
                '<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
                '<div><div class="right_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');

            //設定hubs的url
            $.connection.hub.url = 'http://localhost:5438/signalR';
            // 宣告一個代理
            var qqProxy = $.connection.qQHub;
            // 建立一個方法供服務端呼叫
            qqProxy.client.sendMsg = function (msg) {
                $('#main').append(leftHtml.replace('{msg}',  msg));
            }
            // 啟動 connection
            $.connection.hub.start().done(function () {
                qqProxy.server.online('妹子');//QQ暱稱
                $('#btn').click(function () {
                    //獲取輸入
                    var qqmsg = $('#inputMsg').val();
                    //給逆天發訊息
                    qqProxy.server.serviceSend('逆天', qqmsg);
                    $('#main').append(rightHtml.replace('{msg}', qqmsg));
                });
            });
        });
    </script>
</body>
</html>

View Code

第三階段

群發

我們先接著昨天的QQ聊天來說

這次用一個簡單的方法搞定

一個鍵值對集合存放ConnectionId和GroupName

每個客戶端連線的時候會加入一個組

斷開的時候退出組發訊息
前端也進行了優化。ok，signalR第三個demo誕生，比昨天簡單多了

下面可以說說類似於QQ群的群發訊息了

這個是逆天的自學筆記：

SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升）

SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升，5個Demo貫徹全篇，感興趣的玩才是真的學）應用情景之一：沒太多連續的時間來研究SignalR，所以我把這篇文章分了三個階段：第一個階段，簡單使用，熟悉並認識SignalR 第二個階段，實現

java實現仿QQ即時聊天

這是我的java大作業，這裡就直接貼上我的實驗報告了。 1.1專案介紹這是一個模仿QQ的即時聊天軟體，可以通過執行在本地的服務端，實現兩個客服端之間的通訊，即聊天。採用的是javafx架構作為GUI設計架構，個人認為優點是可以自己設計css，使介面達到美觀的目的。本專案共有登入、註

Android即時通訊--仿QQ即時聊天：（五）聊天模組

1、複雜ListView的展示聊天模組其實就是一個複雜的ListView，在資料介面卡中，從application中獲取到當前登入的使用者，與聊天訊息中的from引數進行比較，如果兩者相同則說明是自己傳送的訊息，那麼ListView中就顯示傳送訊息的佈局，否則顯示接收訊息

Android即時通訊--仿QQ即時聊天：（一）初識Socket

/** * socket服務端 * * @author ZHY * */ public class ServerSocketTest { public static void main(String[] args) throws IOException { final ServerSock

Web端即時通訊、訊息推送的實現

在瀏覽某些網頁的時候，例如 WebQQ、京東線上客服服務、CSDN私信訊息等類似的情況下，我們可以在網頁上進行線上聊天，或者即時訊息的收取與回覆，可見，這種功能的需求由來已久，並且應用廣泛。網上關於這方面的文章也能搜到一大堆，不過基本上都是理論，真正能夠執行

為什麼安卓手機上的多數APP，訊息推送不了？

有人問：蘋果手機上的APP，只要設定好了，訊息推送就沒有一點問題；而安卓手機上，為什麼只有一部分APP(如微信等)，能正常推送；而其它的APP，怎麼設定也沒有及時訊息推送？個人的分析理解如下，說得不對的地方請各位同學斧正。呵呵。蘋果有自己的訊息推送機制。安

Android APP必備高階功能，訊息推送之MQTT

http://www.itnose.net/detail/6652162.html 1. Android端實現訊息推送的幾種方式輪詢：客戶端定時向伺服器請求資料。偽推送。缺點：費電，費流量。攔截簡訊訊息。伺服器需要向客戶端發通知時，傳送一條簡訊，客戶端收到特定簡訊之後

安卓開發-最簡單快速的仿微信聊天實現-附贈微信原生表情，QQ原生表情

前言；正常實現聊天功能想必大家都使用三方的Sdk比如環信融雲集成的，但是聊天記錄的儲存只能有三天，想增加儲存時長就需要花錢，so 我只好自己想辦法實現了，這個demo是類似於留言板，並非即時通訊！只實現了表情文字圖文混排，可以通過手動重新整理實現即時通訊ok廢話少說，先看

【181029】FreeEIM 飛鴿傳書仿QQ即時通訊軟體VC++原始碼

FreeEIM 仿QQ功能的企業即時通訊軟體VC++的原始碼，最後更新於2010年8月份，完成資料庫更改的任務。將聊天記錄改用資料庫形式，暫且使用Access。　　本軟體的視窗和功能都與QQ有點相似，可傳送檔案、視窗抖動、傳送表情等修改功能，並儘量去除所有不相關內容，堅決不對使用者敏感內容作任

Android仿QQ實現聊天功能

前段時間下載了Android仿QQ介面和聊天的Demo，發現很有意思，於是研究了一下並自己在此基礎上整合環信實現了線上聊天功能，可以實現註冊、加人、稽核通知、推送、建立群組、群組聊天，並加入了炫酷的背景色漸變的啟動頁，有動畫效果的dialog，感謝專案中的原版demo。下載地址：http://downlo

最簡單快速的仿微信聊天 demo

TestChatdemo 專案地址：PangHaHa12138/TestChatdemo 簡介：a demo for Android chat look like Weixin 最簡單快速的仿微信聊天 demo 附贈微信原生表情，qq 原生表情更多：作者 &nbs

仿QQ即時通訊軟體開發-賴國榮-專題視訊課程

仿QQ即時通訊軟體開發—7495人已學習課程介紹會使用JAVA的Swing做UI，學會用JAVA操作資料庫，用Java的網路程式設計，多執行緒程式設計，製作一個仿QQ的即時通訊軟體，實現在區域網或者網際網路通訊課程收益製作仿QQ即時通訊軟體，實現在區

qt通過Tcp和SQL實現仿qq的聊天軟體

此專案較難，不建議初學者下載資源下載：專案流程圖：程式執行效果：客戶端： 1.引導介面，用於載入初始化圖片資源等 2.登入介面，包含判斷伺服器是否開啟，網路是否可用，資料庫資訊核對 3.註冊和找回密碼 4.主介面及退出 5.最關鍵之聊天介面服

如何建立雲平臺聊天系統，如何解決訊息推送困難問題

聊天業務描述：使用者1發起聊天，將聊天資訊傳送到伺服器，伺服器將資訊轉發到使用者2 需要解決的問題： 1.如何判斷使用者是否線上（通過使用者滑鼠點選範圍進行判斷，若點選離開頁面則認為使用者的關注點不

Android快速整合極光推送，內含自定義通知，通知推送物件到某一個人，或者某一群人

整合極光推送使用jcenter 自動整合步驟說明：使用 jcenter 自動整合，不需要在專案中新增 jar 和 so，jcenter 會自動完成依賴；在 AndroidManifest.xml 中不需要新增任何 JPush SDK 相關的配置，jcen

Bmob 開發 Android程式快速入門 10 訊息推送

SignalR SelfHost實時訊息,整合到web中，實現伺服器訊息推送

先前用過兩次SignalR，但是中途有段時間沒弄了，今天重新弄，發現已經忘得差不多了，做個筆記！首先建立一個控制檯專案Nuget新增引用聯機搜尋：Microsoft.AspNet.SignalR.SelfHostMicrosoft.Owin.Cors 在Program.cs新增程式碼新增一個

angular入門（基礎篇）

頁面 anti uno itl func obd 作用域 input name 一、什麽是AngularJs？ AngularJs是一個JavaScript框架，通過指令擴展了HTML,並且通過表達式綁定數據到HTML. AngularJs使得開發現代的單頁面應用程序(SP

【CC2530入門教程-增強版】基礎技能綜合實訓案例（基礎版）-題目需求

情況 led 興趣題目嵌入式開發廣東難點在一起參數【CC2530入門教程-增強版】基礎技能綜合實訓案例（基礎版）-題目需求廣東職業技術學院歐浩源一、引用不管是簡單的單片機應用，還是復雜的嵌入式系統，在我看來它們的本質結構是差不多的，都離不開“

TortoiseGit- 創建本地新分支，提交推送到遠程，本地新分支合並到工作分支，提交到遠程工作分支等。

自動 ise 工作 tor 註意遠程工作關系 egit .html 整體思路：創建本地新分支 (create branch) -- 切換到本地新分支工作 (switch/checkout) --提交修改 (commit) -- 推送到遠程新分支 (push) -

SignalR快速入門 ~ 仿QQ即時聊天，訊息推送，單聊，群聊，多群公聊（基礎=》提升）

相關推薦