.net core 使用SignalR實現實時通信

這幾天在研究SignalR，網上大部分的例子都是聊天室，我的需求是把服務端的信息發送給前端展示。並且需要實現單個用戶推送。

用戶登錄我用的是ClaimsIdentity，這里就不多解釋，如果不是很了解，可以看這篇文章https://www.cnblogs.com/zhangjd/p/11332558.html

推薦https://www.cnblogs.com/laozhang-is-phi/p/netcore-vue-signalr.html#tbCommentBody這個博客，寫的很詳細，並且附有Dome

一、后端實現

1、引用SignalR包

Install-Package Microsoft.AspNetCore.SignalR

2、聲明一個類來記錄用戶的連接信息。

    public class SignalRModel
    {
        public static Dictionary<string, SignalRStatus> StaticList = new Dictionary<string, SignalRStatus>();
        public static Dictionary<string, string> SignalRList { get; set; } = new Dictionary<string, string>();
    }

3、聲明Hub，這里我重寫了連接和斷開方法，用來綁定用戶和連接的ConnectionId。（這個比較復雜，是因為我程序中執行的第三方程序，需要實時輸出當前執行的程序的日志。但是調用的執行不可能直接寫在控制器里，這樣調用我沒辦法獲取當前用戶的登錄Id。然后我就在發起連接和斷開連接的方法處理了。）

public class ChatHub : Hub
    {
        /// <summary>
        /// 連接成功
        /// </summary>
        /// <returns></returns>
        public override Task OnConnectedAsync()
        {
            var id = this.Context.ConnectionId;
            var claimNameIdentifier = this.Context.User.Claims.FirstOrDefault(s => s.Type == ClaimTypes.NameIdentifier)?.Value;
            SignalRModel.SignalRList.Add(id, claimNameIdentifier);
            if (SignalRModel.StaticList.Any(s => s.Key.Equals(claimNameIdentifier)))
            {
                SignalRModel.StaticList.Remove(claimNameIdentifier);
            }
            SignalRModel.StaticList.Add(claimNameIdentifier, SignalRStatus.Open);
            return base.OnConnectedAsync();
        }
        /// <summary>
        /// 斷開連接
        /// </summary>
        public override Task OnDisconnectedAsync(Exception exception)
        {
            var id = this.Context.ConnectionId;
            var claimNameIdentifier = this.Context.User.Claims.FirstOrDefault(s => s.Type == ClaimTypes.NameIdentifier)?.Value;
            SignalRModel.SignalRList.Remove(id);
            SignalRModel.StaticList.Remove(claimNameIdentifier);
            return base.OnDisconnectedAsync(exception);
        }
        /// <summary>
        /// 發送消息
        /// </summary>
        /// <param name="user"></param>
        /// <param name="message"></param>
        /// <returns></returns>
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }

4、在程序啟動的時候，把記錄用戶連接信息的類，注入成單例，保存用戶和連接的對應關系，方便單個通信。

  services.AddSingleton<SignalRModel>(provider =>
  {
      return new SignalRModel();
  });

5、配置

 1)、在ConfigureServices中加入

services.AddSignalR();//要寫在addmvc()前面
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

 2)、在Configure中加入

app.UseMvc();
app.UseSignalR(routes =>
{
   routes.MapHub<ChatHub>("/api/chatHub");
});//要寫在UseMvc后面

6、這里我寫了后端兩個接口來發送消息，區別在於第一個是群發，第二個是針對一個連接發送的。

        [HttpGet("SendAll")]
        public IActionResult SendAll()
        {
            _hubContext.Clients.All.SendAsync("ReceiveUpdate", "推送全部人").Wait();
            return Ok("推送全部人");
        }
        [HttpGet("SendOnly")]
        public IActionResult SendOnly()
        {
            var claimNameIdentifier = User.Claims.FirstOrDefault(s => s.Type == ClaimTypes.NameIdentifier)?.Value;
            if (string.IsNullOrEmpty(claimNameIdentifier))
            {
                return Ok(new { code = ResultCode.NotLogin, message = "用戶未登陸！" });
            }
            _hubContext.Clients.Clients(claimNameIdentifier).SendAsync("ReceiveUpdate", DateTime.Now).Wait();
            return Ok("推送當前登錄用戶");
        }

7、我項目實際用到的是這樣的，給當前登錄用戶發送日志消息，判斷連接是否斷開，如果斷開需要獲取前面寫的日志，發送給前端之后，把連接的狀態改成連接中，后面就正常發送。

   foreach (var item in SignalRModel.SignalRList.Where(s => s.Value.Equals(userId.ToString())).ToList())
   {
      if (SignalRModel.StaticList.Any(s => s.Key.Equals(userId.ToString()) && s.Value == SignalRStatus.Open))
      {
         if (SignalRModel.StaticList.Any(s => s.Key.Equals(userId.ToString())))
         {
              SignalRModel.StaticList.Remove(userId.ToString());
         }
         SignalRModel.StaticList.Add(userId.ToString(), SignalRStatus.working);
         _hubContext.Clients.Client(item.Key).SendAsync("ReceiveUpdate", FileHelper.ReadFile(Path.Combine(filePath, "tls_simplify.txt"), Encoding.UTF8)).Wait();
      }
      _hubContext.Clients.Client(item.Key).SendAsync("ReceiveUpdate", args.Data).Wait();
   }

二、前端vue

1、安裝依賴包

npm install @aspnet/signalr

2、示例頁面

<template>
    <section>
        <div style="display: none1">
            <el-form ref="form" label-width="80px" @submit.prevent="onSubmit"
                     style="margin:20px;width:60%;min-width:600px;">
                <el-form-item label="用戶名">
                    <el-input v-model="userName"></el-input>
                </el-form-item>
                <el-form-item label="密碼">
                    <el-input v-model="userMessage"></el-input>
                </el-form-item>
            </el-form>
            <ul v-for="(item, index) in messages" v-bind:key="index + 'itemMessage'">
                <li><b>Name: </b>{{item.user}}</li>
                <li><b>Message: </b>{{item.message}}</li>
            </ul>
            <p>
            <b>后台發送消息: </b>{{this.postMessage}}
            </p>
            <el-button type="primary" @click="submitCard">登錄</el-button>
            <el-button type="primary" @click="getLogs">查詢</el-button>
        </div>
    </section>
</template>

<script>
   
    import * as signalR from "@aspnet/signalr";

    export default {
      name: 'Dashboard',
        data() {
            return {
                filters: {
                    LinkUrl: ''
                },
                listLoading: true,
                postMessage: "",
                userName: "Tom",
                userMessage: "123",
                connection: "",
                messages: [],
                t: ""

            }
        },
        methods: {
            getRoles() {
                let thisvue=this;
                let para = {
                    page: this.page,
                    key: this.filters.LinkUrl
                };
                this.listLoading = true;
                thisvue.connection.start().then(() => {
                   thisvue.connection.invoke('GetLatestCount', 1).catch(function (err) {
                   return console.error(err);
                });
            });
            },
            submitCard: function () {
                if (this.userName && this.userMessage) {
                    this.connection.invoke('SendMessage', this.userName, this.userMessage).catch(function (err) {
                        return console.error(err);
                    });

                }
            },
            getLogs: function () {
                this.listLoading = true;
                this.connection.invoke('GetLatestCount', 1).catch(function (err) {
                    return console.error(err);
                });
            }
        },
        created: function () {
            let thisVue = this;
            thisVue.connection = new signalR.HubConnectionBuilder()
                .withUrl('http://localhost:5000/api/chatHub')
                .configureLogging(signalR.LogLevel.Information)
                .build();
            thisVue.connection.on('ReceiveMessage', function (user, message) {
                thisVue.messages.push({user, message});
            });

            thisVue.connection.on('ReceiveUpdate', function (update) {
                console.info('update success!')
                thisVue.listLoading = false;
                thisVue.postMessage = update;
                window.clearInterval(this.t)
            })
        },
        mounted() {
            this.getRoles();
        },
        beforeDestroy() {
            window.clearInterval(this.t)
            this.connection.stop();
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 30%;
    }

    .EXC {
        color: red;
    }
</style>