SignalR第一節-在5分鐘內完成通訊鏈接和消息發送

時間 2019-12-07

標籤 signalr 一節 5分完成通訊鏈接消息發送简体版

原文原文鏈接

前言

首先聲明，這又是一個小白從入門到進階系列。
SignalR 這個項目我關注了很長時間，中間好像還看到過微軟即將放棄該項目的消息，而後我也就沒有持續關注了，目前的我項目中使用的是本身搭建的 WebSocket ，鏈接管理和消息推送都是統一維護；前段時間編寫了 Asp.NETCore 輕鬆學系列，如今騰出了一點時間，抱着學習的心態，想把本身學習 SignalR 的過程寫出來，就當筆記吧，再作筆記的過程當中再加入實際的項目需求，一步一步的深刻學習 SignalR ，正所謂技多不壓身吧。有想要一塊兒學習的同窗，能夠關注我，你們一塊兒學習，一塊兒進步。javascript

SignalR 簡單介紹

根據官方文檔介紹，SignalR 是一個面向開發人員的庫，其本質是對 Web實時鏈接（WebSocket）的抽象和封裝，使用 SIgnalR，能夠避免本身編寫和管理Web實時鏈接，並得到更多客戶端的兼容性，截止本文發文爲止，SignalR npm 包的版本是 @aspnet/signalr-1.1.2，在 Asp.NETCore 中，SignalR 不支持自動重連，若是客戶端鏈接斷開，必須顯示重連。話很少說，下面就開始幹吧。java

1.項目搭建

1.1 搭建 Asp.NETCore 項目基架

本 SignalR 示例基於 .NETCore-2.2 ，因此，咱們仍是先搭建一個簡單的 Asp.NETCore WebApplicationgit

選擇 .NETCore-2.2 ,取消 Https 選擇，由於若是選擇 Https 還須要安裝測試證書，爲了時間，就別勾選了。github

項目建立完成，什麼也別作，按下 F5 運行網站，看到以下界面npm

好的，運行沒有問題，咱們如今先中止網站，作一些簡單的編碼工做瀏覽器

1.2 引用 SignalR for JavaScript 客戶端 SDK

因爲 .NETCore 內置了 SignalR 組件，咱們無需額外引用服務組件，可是須要手動添加 SignalR JavaScript 客戶端 SDK,按下圖指示添加客戶端引用：服務器

在彈出的對話框中輸入 @aspnet/signalr@1.1.2 並選擇「選擇特定文件」選項，手動選擇兩個文件 signalr.js/signalr.min.js，注意不要選擇默認，不然安裝所有組件太浪費時間，對話框中「目標位置」就是 signalr.js/signalr.min.js 的安裝位置，默認爲 @aspnet/signalr，這裏須要手動改爲 /lib/signalr/xxx 下面

耐心等待幾秒後安裝完成...app

2. 編寫通信業務邏輯

爲了實現一個簡單的羣發通信過程，咱們須要分別編寫服務器和客戶端的代碼，值得慶幸的是，這些代碼很是簡單，服務器和客戶端的代碼一共不到 100 行。asp.net

2.1 編寫服務端代碼

服務器端的代碼以下，建立一個類 WeChatHub 繼承自 Hub 類便可，爲了方便演示，我還重寫了 Hub 的兩個方法 OnConnectedAsync（鏈接）/OnDisconnectedAsync（斷開）ide

public class WeChatHub : Hub
    {
        public void Send(MessageBody body)
        {
            Clients.All.SendAsync("Recv", body);
        }

        public override Task OnConnectedAsync()
        {
            Console.WriteLine("哇，有人進來了：{0}", this.Context.ConnectionId);
            return base.OnConnectedAsync();
        }

        public override Task OnDisconnectedAsync(Exception exception)
        {
            Console.WriteLine("靠，有人跑路了：{0}", this.Context.ConnectionId);
            return base.OnDisconnectedAsync(exception);
        }
    }

 public class MessageBody
    {
        public int Type { get; set; }
        public string UserName { get; set; }
        public string Content { get; set; }
    }

上面這段代碼很是簡單，WeChatHub 類只有一個方法 Send，表示消息入口，其參數接收一個實體類 MessageBody ，這種寫法很是有用，後續文章會介紹；如今，先讓咱們集中精力完成一個羣發通訊。

2.2 配置 SignalR ，進行依賴注入

public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            ...
        }

2.3 配置 SignalR 路由地址

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseSignalR(routes =>
            {
                routes.MapHub<WeChatHub>("/wechatHub");
            });
            ...
        }

到這裏，服務器基架已搭建完成

2.4 編寫客戶端代碼

爲了在 Web 瀏覽器中使用 SignalR，咱們編寫了一小段 js 代碼到文件 wechat.js，並將其和 signalr.js 引入到 Html 頁面中，客戶端 wechat.js 代碼以下：

"use strict";

var connection = new signalR.HubConnectionBuilder()
    .withUrl("/wechatHub")
    .build();

connection.on("Recv", function (data) {
    var li = document.createElement("li");
    li = $(li).text(data.userName + "：" + data.content)
    $("#msgList").append(li);
});

connection.start()
    .then(function () {
        console.log("SignalR 已鏈接");
    }).catch(function(err) {
        console.log(err);
    });

$(document).ready(function () {
    $("#btnSend").on("click", () => {
        var userName = $("#userName").val();
        var content = $("#content").val();
        console.log(userName + ":" + content);
        connection.invoke("send", { "Type": 0, "UserName": userName, "Content": content });
    });
});

這段代碼須要稍微解釋一下。首先，建立了一個 SignalR 的 connection 對象，緊接着，立刻使用 connection 綁定了一個事件，該事件的名稱和服務器 Send 方法中第一個參數的值相呼應，經過這種綁定，客戶端就能夠接收到服務器推送過來的消息，反之，經過 connection.invoke("send",xxx)，也能夠將消息發送到服務器端的 Send 方法中