C# .Net Core WebSocket 實現(xiàn)廣播 實時通信

實時通信微軟官方推薦使用SignalR礁凡,不到在哪個博客看到說SignalR.js依賴Jquery(其實我沒驗證過)判帮,我玩了下demo就沒用過了瑰剃。
聽說WebSocket是比較原始的實時通信類爸舒,.Net Core也支持她紫,不過官方demo就太過簡單了,了解過的朋友都知道屿讽,只能自己發(fā)消息給自己昭灵,不像SignalR直接可以廣播。
經(jīng)過多番研究伐谈,下面用官方demo改造烂完。

WebSocketHelper.cs 輔助類(需要自己創(chuàng)建),主要做容器和容器模型诵棵,根據(jù)自己的結(jié)構(gòu)定義抠蚣。

using System;
using System.Collections.Generic;
using System.Net.WebSockets;

namespace EchoApp
{
    public enum SendType
    {
        SystemMsg,
        Unicast,
        Broadcast
    }
    public enum DataType
    {
        String,
        Json,
    }
    public class WebSocketModel
    {
        public WebSocket Sk { get; set; }
        public Guid Id { get; set; }
    }
    public class ChatRoom
    {
        public List<WebSocketModel> UserList { get; set; }
        public Guid RoomId { get; set; }
    }
    public class MessageModel
    {
        public DataType DataType { get; set; }
        public SendType SendType { get; set; }
        public object Data { get; set; }
        public string SenderName { get; set; }
        public Guid SenderId { get; set; }
        public Guid TargetId { get; set; }
    }    
    public static class WebSocketHelper
    {
        /// <summary>
        /// websocket容器,可以當(dāng)作緩存使用
        /// </summary>
        public static ChatRoom Root = new ChatRoom {
            UserList = new List<WebSocketModel>(),
            RoomId = Guid.NewGuid(),
        };

    }
}

Startup.cs websocket是個服務(wù)履澳,需要一點異步基礎(chǔ)才好看懂代碼嘶窄。

#define UseOptions // or NoOptions or UseOptionsAO
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Logging.Console;
using Microsoft.Extensions.Logging.Debug;
using Newtonsoft.Json;

namespace EchoApp
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddLogging(builder =>
            {
                builder.AddConsole()
                    .AddDebug()
                    .AddFilter<ConsoleLoggerProvider>(category: null, level: LogLevel.Debug)
                    .AddFilter<DebugLoggerProvider>(category: null, level: LogLevel.Debug);
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            #region WebSockets相關(guān)         
            var webSocketOptions = new WebSocketOptions()
            {
                KeepAliveInterval = TimeSpan.FromSeconds(120),
                ReceiveBufferSize = 4 * 1024
            };
            app.UseWebSockets(webSocketOptions);
            app.Use(async (context, next) =>
            {
                if (context.Request.Path == "/ws")
                {
                    if (context.WebSockets.IsWebSocketRequest)
                    {
                        #region 創(chuàng)建socket連接                      
                        WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
                        var msg = JsonConvert.SerializeObject(new MessageModel
                        {
                            DataType = DataType.Json,
                            SendType = SendType.SystemMsg,
                            SenderName = "Server",
                            Data = new { Id = Guid.NewGuid(), UserName = "NolenJ" }
                        });
                        byte[] byteArray = System.Text.Encoding.Default.GetBytes(msg);
                        //連接成功怀跛,發(fā)送反饋,這里用了自定義的數(shù)據(jù)模板柄冲,前端根據(jù)消息類型做處理吻谋。
                        //WebSocket創(chuàng)建連接在瀏覽器network可以看到請求,但是不像ajax請求羊初,給不了返回值滨溉。
                        await webSocket.SendAsync(new ArraySegment<byte>(byteArray), WebSocketMessageType.Text, true, CancellationToken.None);
                        //保存到socket容器
                        WebSocketHelper.Root.UserList.Add(new WebSocketModel
                        {
                            Id = Guid.NewGuid(),
                            Sk = webSocket
                        });
                        #endregion
                        //連接成功后,丟給自定義收發(fā)數(shù)據(jù)的管理工具
                        await Echo(webSocket);
                    }
                    else
                    {
                        context.Response.StatusCode = 400;

                    }
                }
                else
                {
                    await next();
                }

            });
            #endregion
            app.UseFileServer();
        }
        #region WebSockets相關(guān)
        private async Task Echo(WebSocket webSocket)
        {
            var buffer = new byte[1024 * 4];
            WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            while (!webSocket.CloseStatus.HasValue)
            {
                //拆包
                var msg = JsonConvert.DeserializeObject<MessageModel>(Encoding.Default.GetString(buffer));
                switch (msg.SendType)
                {
                    case SendType.Broadcast:
                        List<Task> tasks = new List<Task>();
                        WebSocketHelper.Root.UserList.ForEach(c =>
                        {
                            tasks.Add(c.Sk.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None));
                        });
                        Task.WaitAll(tasks.ToArray());
                        break;
                    case SendType.Unicast:
                        Task.WaitAll(new List<Task>() {
                            WebSocketHelper.Root.UserList.Where(c => c.Id == msg.TargetId).FirstOrDefault().Sk.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None),
                            //給自己發(fā)消息表示我的消息已送達(dá)
                            webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None)
                        }.ToArray());
                        break;
                }
                //重置消息容器
                buffer = new byte[1024 * 4];
                result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            }
            WebSocketHelper.Root.UserList.Remove(WebSocketHelper.Root.UserList.Where(c => c.Sk == webSocket).FirstOrDefault());
            await webSocket.CloseAsync(webSocket.CloseStatus.Value, webSocket.CloseStatusDescription, CancellationToken.None);
        }
        #endregion
    }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table { border: 0 }
        .commslog-data { font-family: Consolas, Courier New, Courier, monospace; }
        .commslog-server { background-color: red; color: white }
        .commslog-client { background-color: green; color: white }
    </style>
</head>
<body>
    <h1>WebSocket Sample Application</h1>
    <p id="stateLabel">Ready to connect...</p>
    <div>
        <label for="connectionUrl">WebSocket Server URL:</label>
        <input id="connectionUrl" />
        <button id="connectButton" type="submit">Connect</button>
    </div>
    <p></p>
    <div>
        <label for="sendMessage">Message to send:</label>
        <input id="sendMessage" disabled />
        <button id="sendButton" type="submit" disabled>Send</button>
        <button id="closeButton" disabled>Close Socket</button>
    </div>

    <h2>Communication Log</h2>
    <table style="width: 800px">
        <thead>
            <tr>
                <td style="width: 100px">From</td>
                <td style="width: 100px">To</td>
                <td>Data</td>
            </tr>
        </thead>
        <tbody id="commsLog">
        </tbody>
    </table>

    <script>
        var connectionUrl = document.getElementById("connectionUrl");
        var connectButton = document.getElementById("connectButton");
        var stateLabel = document.getElementById("stateLabel");
        var sendMessage = document.getElementById("sendMessage");
        var sendButton = document.getElementById("sendButton");
        var commsLog = document.getElementById("commsLog");
        var closeButton = document.getElementById("closeButton");
        var socket;

        var scheme = document.location.protocol === "https:" ? "wss" : "ws";
        var port = document.location.port ? (":" + document.location.port) : "";

        connectionUrl.value = scheme + "://" + document.location.hostname + port + "/ws" ;

        function updateState() {
            function disable() {
                sendMessage.disabled = true;
                sendButton.disabled = true;
                closeButton.disabled = true;
            }
            function enable() {
                sendMessage.disabled = false;
                sendButton.disabled = false;
                closeButton.disabled = false;
            }

            connectionUrl.disabled = true;
            connectButton.disabled = true;

            if (!socket) {
                disable();
            } else {
                switch (socket.readyState) {
                    case WebSocket.CLOSED:
                        stateLabel.innerHTML = "Closed";
                        disable();
                        connectionUrl.disabled = false;
                        connectButton.disabled = false;
                        break;
                    case WebSocket.CLOSING:
                        stateLabel.innerHTML = "Closing...";
                        disable();
                        break;
                    case WebSocket.CONNECTING:
                        stateLabel.innerHTML = "Connecting...";
                        disable();
                        break;
                    case WebSocket.OPEN:
                        stateLabel.innerHTML = "Open";
                        enable();
                        break;
                    default:
                        stateLabel.innerHTML = "Unknown WebSocket State: " + htmlEscape(socket.readyState);
                        disable();
                        break;
                }
            }
        }

        closeButton.onclick = function () {
            if (!socket || socket.readyState !== WebSocket.OPEN) {
                alert("socket not connected");
            }
            socket.close(1000, "Closing from client");
        };

        sendButton.onclick = function () {
            if (!socket || socket.readyState !== WebSocket.OPEN) {
                alert("socket not connected");
            }
            var data = sendMessage.value;
            socket.send(JSON.stringify({
                DataType: 0,
                SendType: 2,
                Data: data,
                SenderName:'未知用戶'
            }));
            commsLog.innerHTML += '<tr>' +
                '<td class="commslog-client">Client</td>' +
                '<td class="commslog-server">Server</td>' +
                '<td class="commslog-data">' + htmlEscape(data) + '</td></tr>';
        };

        connectButton.onclick = function() {
            stateLabel.innerHTML = "Connecting";
            socket = new WebSocket(connectionUrl.value);
            socket.onopen = function (event) {                  
                updateState();
                commsLog.innerHTML += '<tr>' +
                    '<td colspan="3" class="commslog-data">Connection opened</td>' +
                '</tr>';
            };
            socket.onclose = function (event) {
                updateState();
                commsLog.innerHTML += '<tr>' +
                    '<td colspan="3" class="commslog-data">Connection closed. Code: ' + htmlEscape(event.code) + '. Reason: ' + htmlEscape(event.reason) + '</td>' +
                '</tr>';
            };
            socket.onerror = updateState;
            socket.onmessage = function (event) {
               
                let tempdata = JSON.parse(event.data);
                 console.log("收到消息", tempdata);
                switch (tempdata.SendType) {
                    case 0:

                        break;
                    case 1:
                        commsLog.innerHTML += '<tr>' +
                            '<td class="commslog-server">Server</td>' +
                            '<td class="commslog-client">Client</td>' +
                            '<td class="commslog-data">' + htmlEscape(tempdata.Data) + '</td></tr>';
                        break;
                    case 2:
                        commsLog.innerHTML += '<tr>' +
                            '<td class="commslog-server">Server</td>' +
                            '<td class="commslog-client">Client</td>' +
                            '<td class="commslog-data">' + htmlEscape(tempdata.Data) + '</td></tr>';
                        break;
                }
               
            };
        };

        function htmlEscape(str) {
            return str.toString()
                .replace(/&/g, '&amp;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }
    </script>
</body>
</html>

以上的代碼都基于官方demo改動长赞,建議下載官方demo后對比晦攒,要是你用.net core 3.0,記得修改目標(biāo)框架得哆。
代碼如果有出錯或哪里不懂脯颜,在評論區(qū)告訴我。

如果對你有用請留個贊贩据,謝謝栋操。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市饱亮,隨后出現(xiàn)的幾起案子矾芙,更是在濱河造成了極大的恐慌,老刑警劉巖近上,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剔宪,死亡現(xiàn)場離奇詭異,居然都是意外死亡壹无,警方通過查閱死者的電腦和手機(jī)葱绒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來斗锭,“玉大人地淀,你說我怎么就攤上這事♂牵” “怎么了帮毁?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長豺撑。 經(jīng)常有香客問我作箍,道長,這世上最難降的妖魔是什么前硫? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮荧止,結(jié)果婚禮上屹电,老公的妹妹穿的比我還像新娘阶剑。我一直安慰自己,他們只是感情好危号,可當(dāng)我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布牧愁。 她就那樣靜靜地躺著,像睡著了一般外莲。 火紅的嫁衣襯著肌膚如雪猪半。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天偷线,我揣著相機(jī)與錄音磨确,去河邊找鬼。 笑死声邦,一個胖子當(dāng)著我的面吹牛乏奥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播亥曹,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼邓了,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了媳瞪?” 一聲冷哼從身側(cè)響起骗炉,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蛇受,沒想到半個月后句葵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡龙巨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年笼呆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旨别。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡诗赌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出秸弛,到底是詐尸還是另有隱情铭若,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布递览,位于F島的核電站叼屠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏绞铃。R本人自食惡果不足惜镜雨,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望儿捧。 院中可真熱鬧荚坞,春花似錦挑宠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至诡挂,卻和暖如春碎浇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背璃俗。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工奴璃, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人旧找。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓溺健,卻偏偏與公主長得像,于是被迫代替她去往敵國和親钮蛛。 傳聞我的和親對象是個殘疾皇子鞭缭,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 出了小區(qū)門口一直往西,到人工湖西邊和人民路交叉的路口魏颓,再往南拐岭辣,一直到威利發(fā)面包店,再往西拐甸饱,到學(xué)校門口沦童,...
    王靜1閱讀 537評論 0 8
  • 發(fā)現(xiàn)大象的時候,它已經(jīng)長得很大了叹话,常常壓得我的心跳不起來偷遗。 據(jù)說,大象在我心里住了快三年驼壶,神奇氏豌,我在這之前可從...
    封石閱讀 126評論 0 0
  • 敬愛的李老師,智慧的教授热凹,親愛的家人們: 大家好泵喘!我是來自長興南方眼視光中心的楊軍微。今天是2019年1月...
    楊軍微閱讀 245評論 0 1