专业挖坑21年
1.前 言
网上找了很多资料,可能是自己找的路子不对吧,都找不到适合我这样萌新的文章,大多.net环境使用的websocket都是在说一个通信的案例,学起来的确很吃力,自己也挖坑很久才爬出来,所以本篇文章也只是对自己学习的做一个总结。
2.为什么需要WebSocket
在已经存在http协议的情况下还使用其他协议?
HTTP协议:通信只能是客户端发起,做不到服务器主动向客户端推送信息,以前使用轮询方式请求服务器(浪费资源、效率低)
Websocket就是在这样的环境下发明的,在阮一峰老师文章中讲解很详细
http://www.ruanyifeng.com/blog/2017/05/websocket.html
3.websocket怎样建立连接
首先客户端需要和服务端达成握手的协议
客户端
向服务器发起连接
1 webSocket = new WebSocket("ws://localhost/api/chat");
服务端
代码不完整只加入了接收的代码
[Route] [HttpGet] public HttpResponseMessage Connect(string nickName) { //在服务端接受web socket请求,传入的函数作为web socket的处理函数,待web socket建立后该函数会被调用, //在该函数中可以对web socket进行消息收发 HttpContext.Current.AcceptWebSocketRequest(ProcessRequest);//将websocket接受到AspNetWebSocketContext //构造同意切换至web socket的response return Request.CreateResponse(HttpStatusCode.SwitchingProtocols); } public async Task ProcessRequest(AspNetWebSocketContext context) { var socket = context.WebSocket;//传入的context中当前的web socket对象 }
4.客户端的API
Websocket给了几个回调函数,其他的API我就不一一列出了,阮老师的文章中写的很详细
//建立成功 webSocket.onopen = function () { console.log("socket opened"); } //异常 webSocket.onerror = function () { console.log("An exception hai occurred"); } //服务端返回消息回调 webSocket.onmessage = function (event) { console.log(event.data); } //关闭连接回调 webSocket.onclose = function () { console.log("socket closed"); } //向服务器发送数据 webSocket.send("hellow word");
//客户端主动断开连接 webSocket.close();
5.关于服务端
服务端建立连接之后作为一个初学者来说我想知道是怎样实现和客户端进行进行会话
接收:
// // 摘要: // 从 WebSocket 连接异步接受数据。 // // 参数: // buffer: // 引用应用程序缓冲区,其为接收的数据的存储位置。 // // cancellationToken: // 传播有关应取消操作的通知。 // // 返回结果: // 返回 System.Threading.Tasks.Task`1。表示异步操作的任务对象。任务对象上的 System.Threading.Tasks.Task`1.Result // 属性将返回包含已接收数据的 System.Byte 数组。 public abstract Task<WebSocketReceiveResult> ReceiveAsync(ArraySegment<byte> buffer, CancellationToken cancellationToken);
发送:
// // 摘要: // 发送 WebSocket 上连接异步的数据。 // // 参数: // buffer: // 要通过连接发送的缓冲区。 // // messageType: // 指示应用是否发送二进制或文本消息。 // // endOfMessage: // 指示在“缓冲区”的数据是否实消息的最后一部分。 // // cancellationToken: // 传播有关应取消操作的通知的标记。 // // 返回结果: // 返回 System.Threading.Tasks.Task。表示异步操作的任务对象。 public abstract Task SendAsync(ArraySegment<byte> buffer, WebSocketMessageType messageType, bool endOfMessage, CancellationToken cancellationToken);
其实整个过程就几句代码,但是一直找不到适合我自己的,走了很多弯路,最后把写的案例代码贴上来(虽然是看着别人的写的)
6.案例代码
客户端
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <input id="nickName" name="nickName" type="text" value="Jone" /> </div> <div> <input id="btnConnection" name="btnConnection" value="Connection" type="button" /> <input id="btnDisconnect" name="btnDisconnect" value="Disconnect" type="button" /> </div> <div> <input id="btnSend" name="btnSend" value="Send" type="button" /> </div> <div id="message"> </div> </body> </html>
<script> window.onload = function () { document.getElementById("btnConnection").onclick = Connection; document.getElementById("btnDisconnect").onclick = Disconnect; document.getElementById("btnSend").onclick = Send; //CreateWebSocket("ws://localhost/WebApiDemo/api/chat?nickName=b4s51x2"); } var webSocket; function Connection() { webSocket = new WebSocket("ws://localhost/WebApiDemo/api/chat?nickName=b4s51x2"); InitEventHandles(); } function InitEventHandles() { //建立成功 webSocket.onopen = function () { console.log("socket opened"); } //异常 webSocket.onerror = function () { console.log("An exception hai occurred"); } //服务端返回消息回调 webSocket.onmessage = function (event) { console.log(event.data); } //关闭连接回调 webSocket.onclose = function () { console.log("socket closed"); } } function Send() { //向服务器发送数据 webSocket.send(document.getElementById("nickName").value); } function Disconnect() { webSocket.close(); } </script>
服务端
private static List<WebSocket> _socket = new List<WebSocket>();
[Route] [HttpGet] public HttpResponseMessage Connect(string nickName) { //在服务端接受web socket请求,传入的函数作为web socket的处理函数,待web socket建立后该函数会被调用, //在该函数中可以对web socket进行消息收发 HttpContext.Current.AcceptWebSocketRequest(ProcessRequest); //构造同意切换至web socket的response return Request.CreateResponse(HttpStatusCode.SwitchingProtocols); } public async Task ProcessRequest(AspNetWebSocketContext context) { var socket = context.WebSocket;//传入的context中当前的web socket对象 _socket.Add(socket);//此处将web socket对象加入一个静态列表中 //进入一个无限循环,当web socket close是循环结束 while (true) { var buffer = new ArraySegment<byte>(new byte[1024]); var receviedResult = await socket.ReceiveAsync(buffer, CancellationToken.None);//对web socket进行异步接收数据 if (receviedResult.MessageType == WebSocketMessageType.Close) { await socket.CloseAsync(WebSocketCloseStatus.Empty, string.Empty, CancellationToken.None);//如果client发起close请求,对client进行ack _socket.Remove(socket); break; } if (socket.State == WebSocketState.Open) { string recvMsg = Encoding.UTF8.GetString(buffer.Array, 0, receviedResult.Count); var recvBytes = Encoding.UTF8.GetBytes(recvMsg); var sendBuffer = new ArraySegment<byte>(recvBytes); foreach (var innerSocket in _socket)//当接收到文本消息时,对当前服务器上所有web socket链接进行广播 { if (innerSocket == socket) { await innerSocket.SendAsync(sendBuffer, WebSocketMessageType.Text, true, CancellationToken.None); } } } } }
服务端原文章找不到了,最后感谢各位大佬提供的文章学习。