WebSocket in ASP.NET Core

一、WebSocket

  WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)

首先HTTP有1.1和1.0之说,也就是所谓的keep-alive,把多个HTTP请求合并为一个,但是Websocket其实是一个新协议,跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已,也就是说它是HTTP协议上的一种补充。WS和WSS协议类似于HTTP和HTTPS,允许使用安全和保密的通信方案。

二、ASP.NET Core中的WebSocket

  要在ASP.NET Core中使用WebSocket,要先引用Microsoft.AspNetCore.WebSockets.Server的NuGet Package包。

  下面我们创建一个名为WebSocketHandler.cs的类,内容如下:

  通过对HttpContext中的WebSockets.AcceptWebSocketAsync方法,接受WebSocket请求;并在EchoLoop函数中进行请求的处理。

  1. public class SocketHandler
  2. {
  3. public const int BufferSize = 4096;
  4. WebSocket socket;
  5. SocketHandler(WebSocket socket)
  6. {
  7. this.socket = socket;
  8. }
  9. async Task EchoLoop()
  10. {
  11. var buffer = new byte[BufferSize];
  12. var seg = new ArraySegment<byte>(buffer);
  13. while (this.socket.State == WebSocketState.Open)
  14. {
  15. var incoming = await this.socket.ReceiveAsync(seg, CancellationToken.None);
  16. var outgoing = new ArraySegment<byte>(buffer, 0, incoming.Count);
  17. await this.socket.SendAsync(outgoing, WebSocketMessageType.Text, true, CancellationToken.None);
  18. }
  19. }
  20. static async Task Acceptor(HttpContext hc, Func<Task> n)
  21. {
  22. if (!hc.WebSockets.IsWebSocketRequest)
  23. return;
  24. var socket = await hc.WebSockets.AcceptWebSocketAsync();
  25. var h = new SocketHandler(socket);
  26. await h.EchoLoop();
  27. }
  28. /// <summary>
  29. /// branches the request pipeline for this SocketHandler usage
  30. /// </summary>
  31. /// <param name="app"></param>
  32. public static void Map(IApplicationBuilder app)
  33. {
  34. app.UseWebSockets();
  35. app.Use(SocketHandler.Acceptor);
  36. }
  37. }

  这个类只处理了最简单的客户端发送信息并将原文返回客户端。

  接着就要做路由映射了:

  1. app.UseStaticFiles();
  2. app.Map("/ws", SocketHandler.Map);

  要验证并看到运行的结果,我们还要创建一个Html。并在Html页面里面创建一个Div内容如下:

  1. <div id="output"></div>

  并且添加一个WebSocket的客户端脚本:

 

  1. <script language="javascript" type="text/javascript">
  2. var socket;
  3. var uri = "ws://" + window.location.host + "/ws";
  4. var output;
  5. var text = "test echo";
  6. function write(s) {
  7. var p = document.createElement("p");
  8. p.innerHTML = s;
  9. output.appendChild(p);
  10. }
  11. function doConnect() {
  12. socket = new WebSocket(uri);
  13. socket.onopen = function (e) { write("opened " + uri); doSend(); };
  14. socket.onclose = function (e) { write("closed"); };
  15. socket.onmessage = function (e) { write("Received: " + e.data); socket.close(); };
  16. socket.onerror = function (e) { write("Error: " + e.data); };
  17. }
  18. function doSend() {
  19. write("Sending: " + text);
  20. socket.send(text);
  21. }
  22. function onInit() {
  23. output = document.getElementById("output");
  24. doConnect();
  25. }
  26. window.onload = onInit;
  27. </script>

 

  下面就可以看到运行结果了:

 

 

  这个例子可以在如下Github中获取到:https://github.com/zbrad/wsweb

展开阅读全文

没有更多推荐了,返回首页