演示:http://socket.haojima.net
WebSocket是Html5新增的一个很酷的技术。下面我们简单讲解下这个很酷的技术
var Socket = new WebSocket(url);//创建 WebSocket 对象创建了一个WebSocket对象后会触发打开连接事件:
Socket.onopen = function(){ }除了onopen事件,还有其他三个事件:
Socket.onmessage //客户端接收服务端数据时触发 Socket.onerror //通信发生错误时触发 Socket.onclose //连接关闭时触发另外还有两个方法:
Socket.send() //使用连接发送数据 Socket.close() //关闭连接最后还有四个连接状态属性:
Socket.readyState 0 - 表示连接尚未建立。 1 - 表示连接已建立,可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。整个WebSocket常用功能知识点就四个事件、两个方法、四种状态。简单吧,下面我们看看asp.net core后台的配合:
后台添加一个SocketHandler类,并添加一个静态方法Map:
/// <summary> /// 请求 /// </summary> /// <param name="app"></param> public static void Map(IApplicationBuilder app) { app.UseWebSockets(); //【注意】需要 nuget 导入 Microsoft.AspNetCore.WebSockets.Server app.Use(Acceptor); }然后新增对应的Acceptor方法:
/// <summary> /// 接收请求 /// </summary> /// <param name="httpContext"></param> /// <param name="n"></param> /// <returns></returns> static async Task Acceptor(HttpContext httpContext, Func<Task> n) {需要在Startup.cs类里面的Configure方法里面加入
app.Map("/ws", SocketHandler.Map); //传入我们刚才新建的静态方法Map现在为止,基本的类和配置已经完成。 我们主要操作,是在Acceptor方法里面接收和发送消息。
//建立连接 var socket = await httpContext.WebSockets.AcceptWebSocketAsync(); //等待接收数据 await socket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None); //发送消息 await socket.SendAsync(arraySegment, WebSocketMessageType.Text, true, CancellationToken.None);后台关键代码也就这三句,建立连接、等待接收、发送消息。 不过这里有一点需要理解。建立连接后,可以接收任意多次客户端消息。所以ReceiveAsync等待接收这里需要死循环接收消息,直到连接断开。(不用担心真的死循环,没有消息发送的时候,代码会阻塞在那里等待消息)
【完整实现】:https://github.com/zhaopeiym/ChatRoom
