[SignalR][ASP.NET] 使用 SignalR 來達成電腦網頁與手機網頁即時互動

Standard

之前寫過一篇 [Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動,當時是用 Node.js,最近看到了 .NET 也提供了相似的解決方案 ── SignalR。

官方的介紹是:Async signaling library for .NET to help build real-time, multi-user interactive web applications.
SignalR 一樣可以做即時跟多使用者的互動網路應用程式。
在製作案件時,有時候是無法在客戶的主機上動手腳的,為了不要被技術跟環境侷限,多會一種解決方案也不賴呀。
而且寫的時候覺得 SignalR 寫起來更簡單,很多事都在背後偷偷幫你做完了(.NET 似乎都這樣封裝得好好的,但還是要搞懂其中原理比較好呀)。

廢話不多說,來看一下怎麼實作此次的需求囉。

此次開發使用:

  • Visual Studio 2010 Professional
  • ASP.NET 4.0 (C#)

如何透過 NuGet 安裝 SignalR

噢,之前好像沒寫過 NuGet,那就先簡單介紹一下如何透過 NuGet 安裝最新的 SignalR 吧。
1. 開啟 VS2010,建立新專案,選擇 Visual C# 的 ASP.NET 空白 Web 應用程式。

 

  1. 建立好之後,在「參考」上面點右鍵,選擇「管理 NuGet 套件…」,如圖。(我的 NuGet 已升級至 2.x 版本)

 

  1. 接著搜尋線上的套件:SignalR,記得把左上角的「僅限穩定」改為選擇「包括發行前版本」。
    選擇安裝「Microsoft ASP.NET SignalR」,上面那幾個是相依套件,也會跟著一起安裝。

  2. 安裝完畢後,「參考」裡面會自動加入需要的 SignalR 參考,然後專案也會自動產生「Scripts」目錄,裡面自動加入 jQuery 以及 jQuery SignalR 的 .js 檔。


實戰

這次我們要做的也是讓手機掃描網頁上的 QRCode,進而用手機控制網頁的動作。
本次實作選擇使用 Hub 模式(另一種是 PersistentConnection)。

  1. 首先,新建一個新的類別 Core.cs,定義伺服器端的動作。
  • Client 類別定義了 Client 端的屬性,有 UniqueKey(唯一 Key,用來讓電腦跟手機產生關連。在網頁端可以用 js 或透過 Flash ActionScript 生成。)跟 ConnectionId(連線後,SignalR 會自動分配給 Client 端的 GUID)
  • Core 類別實作 Hub。
    • RegisterClient:每次產生連線後,就會呼叫 RegisterClient 方法,也將 Client 端產生的 key 值註冊進去。
      註冊到一個 Client 的集合,供接下來的動作做比對。
      註冊完之後,就呼叫 Client 端的 registerComplete 事件。
    • MobileOpenWebpage:主要動作之一。會在手機掃描完 QRCode 後打開手機版網頁,連線成功後呼叫這個事件,檢查相應的電腦端 Client,呼叫它的 playMovie 事件。
    • ChangeBackground:也是主要動作之一。本例手機網頁上有個 Button,點擊後會呼叫這個事件,這個事件檢查相應的電腦端後,呼叫它的 changeBackground 事件。
    • RetrieveClient:上面兩個方法都有用到的方法。用來檢查相應的手機端跟電腦端,取得各自的 ConnectionId,供上面的動作使用。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRQRCode
{
    public class Client
    {
        // 唯一 Key, 用來讓電腦跟手機產生關連
        public string UniqueKey { get; set; }

        // 連線 guid
        public string ConnectionId { get; set; }
    }

    public class Core : Hub
    {
        // Client 集合
        public static List<Client> _clients = new List<Client>();
        private object _syncRoot = new object();

        public string MobileConnectionId { get; set; }
        public string ComputerConnectionId { get; set; }

        /// <summary>
        /// 註冊目前使用者
        /// </summary>
        /// <param name="key"></param>
        public void RegisterClient(string key)
        {
            lock (_syncRoot)
            {
                // 在集合中找出目前使用者
                var client = _clients
                    .FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);

                // 如果找不到,就新增到集合中(配上 javascript 生成的 key 值)
                if (client == null)
                {
                    client = new Client { ConnectionId = Context.ConnectionId, UniqueKey = key };
                    _clients.Add(client);
                }
            }

            Clients.Client(Context.ConnectionId).registerComplete();

        }

        /// <summary>
        /// 取得 Client 端
        /// </summary>
        /// <param name="key"></param>
        /// <returns></returns>
        private bool RetrieveClient(string key)
        {
            // 找出手機端 (目前)
            var mobile = _clients.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);

            // 若找不到目前手機端,應該是出了什麼錯 ... 不要繼續往下做
            if (mobile == null) return false;

            // 電腦端使用者
            var computer = _clients
                .FirstOrDefault(x => x.ConnectionId != Context.ConnectionId &&
                    x.UniqueKey == key);

            // 找不到另一方裝置
            if (computer == null)
            {
                Clients.Client(Context.ConnectionId).noOpponent();
                return false;
            }

            // 紀錄手機端的 ConnectionId
            MobileConnectionId = mobile.ConnectionId;
            // 紀錄電腦端的 ConnectionId
            ComputerConnectionId = computer.ConnectionId;

            return true;
        }

        /// <summary>
        /// 手機打開網頁事件
        /// </summary>
        /// <param name="key"></param>
        public void MobileOpenWebpage(string key)
        {
            if (!RetrieveClient(key))
                return;

            if (MobileConnectionId == "" || ComputerConnectionId == "")
                return;

            // 叫電腦端做事
            Clients.Client(ComputerConnectionId).playMovie();
        }

        /// <summary>
        /// 變換電腦端背景顏色
        /// </summary>
        /// <param name="key"></param>
        public void ChangeBackground(string key)
        {
            if (!RetrieveClient(key))
                return;

            if (MobileConnectionId == "" || ComputerConnectionId == "")
                return;

            // 叫電腦端做事
            Clients.Client(ComputerConnectionId).changeBackground();
        }

    }
}

 

  1. 然後看看 Client 端的,先看電腦端(還有手機端)。這張網頁上可視的 element 只有一個 QRcode 的 div。
  • head 內要引入三個 script:
    1. jQuery
    2. jQuery SignalR
    3. signalr/hubs。上面兩個東西,透過 NuGet 安裝後就會在 Scripts 目錄了,拖過來就有,但這行比較特別,你找不到這個目錄,但執行的時候就會出現了(真神奇!)。注意是寫這個應用程式的相對路徑。
  • 主要 script 的部分:
    • 建立連線成功後,將手機網頁 + key 的網址透過 Google Chart 產生 QRCode,顯示於 qrcode 這個 div 中。
    • 呼叫伺服器端事件 RegisterClient,並將 key 帶進去註冊成新的 Client。(記得呼叫伺服器端事件,首字是小寫喔!)
    • 然後定義三個 Client 端的事件:registerComplete、playMovie 與 changeBackground。
    • registerComplete:將 Client 註冊完成後,伺服器端會呼叫這個 Client 端事件,這邊很簡單地只用 alert 顯示訊息。
    • playMovie:手機端打開網頁後,檢查有相應的電腦端後,會透過伺服器端呼叫電腦端這個事件。原本是拿來控制 Flash 動畫的,所以叫 playMovie :P
    • changeBackground:手機端的網頁上有顆按鈕,點擊後會透過伺服器端呼叫電腦端網頁的這個事件。效果是讓背景顏色隨機變換。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="patw, Patrick Wang" />
    <title>SignalR 電腦端網頁</title>
    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.signalR-1.0.0-alpha2.min.js" type="text/javascript"></script>
    <script src="signalr/hubs"></script>
</head>
<body>

    <script type="text/javascript">

        $(document).ready(function () {

            // 透過 $.connection.core 建立對應服務器端的類別 Core(名稱要一樣)
            var core = $.connection.core;
            var key = NewGuid();

            // Start the connection
            $.connection.hub.start().done(function () {

                // 手機網頁的網址
                var mobileurl = "http://手機網頁的網址/";

                // 顯示給手機照的 qrcode
                $("#qrcode").append("<img src='http://chart.apis.google.com/chart?chs=300x300&cht=qr&chl=" + mobileurl + "?key=" + key + "&choe=UTF-8' />");

                // 將此 key 註冊到 server 端(伺服器端事件首字都小寫喔)
                core.server.registerClient(key);

            });

            // Client 註冊完成事件
            core.client.registerComplete = function () {
                alert("Key: " + key + " 正在等待手機開啟中");
            };

            // 手機網頁開啟事件
            core.client.playMovie = function () {
                alert("手機開啟網頁了!");
            };

            // 更換背景顏色
            core.client.changeBackground = function () {
                var str = "0123456789abcdef", t = "";
                for (j = 0; j < 6; j++) {
                    t = t + str.charAt(Math.random() * str.length);
                }

                $("body").attr("style", "background-color:#" + t);
            };
        });

        // 用來產生類似 GUID 的字串
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        function NewGuid() {
            return (S4() + S4());
        }

    </script>

    <div id="qrcode"></div>

</body>
</html>
  1. 手機端的部分:
  • 畫面上唯一可視的東西是一顆 Button,用來控制電腦端網頁的背景顏色。
  • 跟電腦端一樣,head 內要引入三個 script(本例我是將手機網頁放在 mobile/ 子目錄中,因此會用 ../ 來設相對路徑):
    1. jQuery
    2. jQuery SignalR
    3. signalr/hubs
  • getParameterByName:不想寫到後端程式,所以取得 Querystring Parameter 值的部分就用 JavaScript 處理了。
  • 主要 script 的部分:
    • 建立連線成功後,呼叫伺服器端事件 RegisterClient(一樣注意在這邊首字是小寫),將 key 註冊到 Client 集合中。
    • 註冊成功後,再呼叫伺服器端事件 MobileOpenWebpage。這是手機端用來通知伺服器端「我已經將網頁打開囉,請再發個通知給電腦端吧!」的事件。
    • 手機端唯一的 Client 端的事件是 noOpponent。伺服器端會在找不到相應 key 的電腦端時呼叫此事件,用來通知使用者:電腦端遺失,他可能得重掃。
    • registerComplete:將 Client 註冊完成後,伺服器端會呼叫這個 Client 端事件,這邊很簡單地只用 alert 顯示訊息。
    • #btnChangeBg 是畫面上唯一的 Button,這邊綁定它的 click 事件,點擊後會呼叫伺服器端的 changeBackground 事件,再轉知相符 key 電腦端的 Client 事件,用來改變網頁背景顏色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="author" content="patw, Patrick Wang" />
    <title>SignalR 手機端網頁</title>
    <style type="text/css">
        #btnChangeBg
        {
            width: 80%;
            height: 300px;
            font-size: 11pt;
        }
    </style>
    <script src="../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.signalR-1.0.0-alpha2.min.js" type="text/javascript"></script>
    <script src="../signalr/hubs"></script>
    <script type="text/javascript">
        // 用 JavaScript 方式取得 GET 值
        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.search);
            if (results == null)
                return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        }
    </script>
</head>
<body>

        <script type="text/javascript">

            $(document).ready(function () {

                // 透過 $.connection.core 建立對應服務器端的類別 Core(名稱要一樣)
                var core = $.connection.core;
                var key = getParameterByName("key");

                if (key == "") {
                    alert("Hey.. key is empty! please scan QRCode to get this page!");
                }

                // Start the connection
                $.connection.hub.start().done(function () {

                    // 將此 key 註冊到 server 端(伺服器端事件首字都小寫喔)
                    core.server.registerClient(key).done(function () {
                        // 註冊完,呼叫手機打開網頁事件,去找電腦端
                        core.server.mobileOpenWebpage(key);
                    });

                });

                // 找不到電腦端事件
                core.client.noOpponent = function () {
                    alert("No opponent!\r\nPlease refresh your webpage on computer, and try rescan QRCode by your mobile!");
                };

                $("#btnChangeBg").bind("click", function () {

                    // 呼叫 Server 端的變換背景顏色事件
                    core.server.changeBackground(key);

                });

            });

        </script>

        <input type="button" id="btnChangeBg" value="用手機變換電腦端的網頁背景顏色" />

</body>
</html>

 

範例全部的程式碼如上,下面也附上範例檔:
本範例的 VS2010 專案檔下載

第一次寫 SignalR 的東西,若有錯誤的地方請偷偷告訴我啦 :P
下次再試試看用 PersistentConnection 模式來做些有趣的東西囉~

One thought on “[SignalR][ASP.NET] 使用 SignalR 來達成電腦網頁與手機網頁即時互動

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *