.NET开发——WebSocket应用

Posted 2021-04-20 行走的技术

WebSocket 是 html5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

浏览器通过 javascript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

我们先来看看哪些浏览器支持websocket

Websocket服务器支持

前端代码示例

@{ ViewBag.Title = "WebSocket";}
<h2>WebSocket</h2>
<form id="form1" runat="server"> <div> <input id="userName" type="text" /> <input id="conn" type="button" value="连接" /> <input id="close" type="button" value="关闭" /> <span id="tips"></span> <input id="content" type="text" /> <input id="send" type="button" value="发送" /> </div> <div id="view"> <ul></ul> </div></form>@section scripts{
 <script> // <httpRuntime targetFramework="4.5" /> $(function () { if ("WebSocket" in window) { } else { alert("您的浏览器不支持 WebSocket!"); } var oldUrl = "ws://localhost:9008/MyWebSocketHandler.ashx"; var ws; function connect() { var userName = $("#userName").val(); var url = oldUrl + "?userName=" + userName; ws = new WebSocket(url); $('#tips').text('正在连接'); ws.onopen = function ()//websocket 4个事件{ $('#tips').text('已经连接'); } ws.onmessage = function (evt) { //$('#tips').text(evt.data); $("#view ul").append("<li>" + evt.data + "</li>"); } ws.onerror = function (evt) { $('#tips').text(JSON.stringify(evt)); } ws.onclose = function () { $('#tips').text('已经关闭');
 connect();//短线重连 //心跳： 定时器 时间间隔发个数据到服务器，服务再返回一下 } } $('#conn').click(function () { connect(); });
 $('#close').click(function () { ws.close(); });
 $('#send').click(function () { if (ws.readyState == WebSocket.OPEN) { ws.send($('#content').val()); } else { $('#tips').text('连接已经关闭，点击重连'); } }); });</script>}

后端代码示例

/// <summary>/// MyWebSocketHandler 的摘要说明/// </summary>public class MyWebSocketHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState{ private string _UserName = ""; public void ProcessRequest(HttpContext context) { if (context.IsWebSocketRequest) { this._UserName = context.Request.QueryString["UserName"]; context.AcceptWebSocketRequest(ProcessChat); } else { context.Response.Write("Test Handler"); } }
 private async Task ProcessChat(AspNetWebSocketContext context) { WebSocket socket = context.WebSocket; CancellationToken cancellationToken = new CancellationToken(); ChatManager.AddUser(_UserName, socket);
 //某人登陆后，给群里其他人发 登陆消息 await ChatManager.SendMessage(cancellationToken, $"{DateTime.Now.ToString("yyyyMMdd-HHmmss:fff")} {this._UserName} 进入聊天室");
 while (socket.State == WebSocketState.Open) { ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]); WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, cancellationToken); if (result.MessageType == WebSocketMessageType.Close) //如果输入帧为取消帧，发送close命令 { //放在前面移除和发消息， 因为直接关浏览器会导致CloseAsync异常 ChatManager.RemoveUser(_UserName); await ChatManager.SendMessage(cancellationToken, $"{DateTime.Now.ToString("yyyyMMdd-HHmmss:fff")} {this._UserName} 离开聊天室"); await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, String.Empty, cancellationToken); } else//获取字符串 { string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, result.Count); string content = $"{DateTime.Now.ToString("yyyyMMdd-HHmmss:fff")} {this._UserName} 发送了：{userMsg}"; await ChatManager.SendMessage(cancellationToken, content); } } }
 public bool IsReusable { get { return false; } }}

public class ChatManager{ private static ConcurrentDictionary<string, WebSocket> _UserDictionary = new ConcurrentDictionary<string, WebSocket>();
 public static void AddUser(string name, WebSocket socket) { _UserDictionary[name] = socket; } public static void RemoveUser(string name) { WebSocket socket = null; _UserDictionary.TryRemove(name, out socket); }
 public static async Task SendMessage(CancellationToken cancellationToken, string content) { ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]); buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content)); foreach (var socket in _UserDictionary.Select(d => d.Value)) { await socket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken); } }}

实现效果