WebSocket的使用

 

前端代码

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>
<script src="~/Scripts/jquery-3.3.1.js"></script>

<script type="text/javascript">
    $(function () {
        // http://  https://
        // ws 开头， 也可以wss开头
        var socket;
        var url = "ws://localhost:57211/Home/MyWebSocket";
        function connect() {
            var socketurl = url + "?name=" + $("#userName").val();
            socket = new WebSocket(socketurl);// 就是用来建立即时通信同道 Socket长链接
            // 会有一个握手的过程
            // 去链接的后台方法可以是MVC控制器里的方法，也可以是WebApi，还可以支持一般处理程序，也可以支持aspx

            //链接打开的时候触发
            socket.onopen = function () {
                $("#tips").text("链接已打开");

                 
                  // 定时发送一个消息给服务器发送心跳包 服务器接收到心跳包以后马上就再回复一个消息给客户端
                   // 如果我发现十秒钟或者在间隔时间内 接受不到服务器回复的心跳消息 我就认为连接掉线
                 // 这时候就需要断线 connect();

            }
            // 接受服务器发送过来的消息
            socket.onmessage = function (evt) { 
                $("#view ul").append("<li>" + evt.data + "</li>"); 
            }
            // 异常的时候触发方法
            socket.onerror = function (evt) {
                $("#tips").text(JSON.stringify(evt));
            }
            // 链接关闭的时候触发
            socket.onclose = function () {
                $("#tips").text("连接关闭了");
            }


          
        }

        // 点击"连接"按钮
        $("#conn").on("click", function () {
            connect();
        })
        //点击“关闭”按钮
        $("#close").on("click", function () {
            socket.close();
             
        })

        //点击“发送”按钮
        $("#send").on("click", function () {
            if (socket.readyState == WebSocket.OPEN) {
                socket.send($("#content").val());
            }
            else {
                alert("链接已经断开");
            } 
        })

    })
</script>

 

C#/.NET 后端处理

public class HomeController : Controller
{
    public ActionResult WebSocket()
    {
        return View();
    }



    private string UserName = string.Empty;

    /// <summary>
    /// WebSocket建立链接的方法
    /// </summary>
    /// <param name="name"></param>
    public void MyWebSocket(string name)
    {
        if (HttpContext.IsWebSocketRequest)
        {
            this.UserName = name;
            HttpContext.AcceptWebSocketRequest(ProcessChat);
        }
        else
        {
            HttpContext.Response.Write("我不处理");
        }
    }


    public async Task ProcessChat(AspNetWebSocketContext socketContext)
    {
        //  SuperSocket:Session
        // 表示客户端发起请求的一个链接
        System.Net.WebSockets.WebSocket socket = socketContext.WebSocket;

        CancellationToken token = new CancellationToken();

        string socketGuid = Guid.NewGuid().ToString();

        OldChatManager.AddUser(socketGuid, UserName, socket, token);
         
        await OldChatManager.SengdMessage(token, UserName, "进入聊天室");
        while (socket.State == WebSocketState.Open)
        {
            ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
            WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token);
            string userMessage = Encoding.UTF8.GetString(buffer.Array, 0, result.Count); // 来自于客户端发送过来的消息内容 


            if (result.MessageType == WebSocketMessageType.Close)
            {
                OldChatManager.RemoveUser(socketGuid);
                await OldChatManager.SengdMessage(token, UserName, "离开聊天室");
                await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, string.Empty, token);
            }
            else
            {
                await OldChatManager.SengdMessage(token, UserName, userMessage);
            }
        }
    }
}

 

相关类

public class SocketModel
    {
        /// <summary>
        /// 链接的唯一ID
        /// </summary>
        public string SocketGuid { get; set; }

        /// <summary>
        ///  用户名称
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        /// 每一个用户链接进来以后 对应的这一个Socket实例
        /// </summary>
        public WebSocket Socket { get; set; }
    }

 

public class SocketModel
 {
     /// <summary>
     /// 链接的唯一ID
     /// </summary>
     public string SocketGuid { get; set; }

     /// <summary>
     ///  用户名称
     /// </summary>
     public string UserName { get; set; }

     /// <summary>
     /// 每一个用户链接进来以后 对应的这一个Socket实例
     /// </summary>
     public WebSocket Socket { get; set; }
 }

 

public class OldChatManager
{
    /// <summary>
    /// 默认某一个群组里面有这么一些人
    /// </summary>
    public static List<SocketModel> socketlist = new List<SocketModel>() {
         new SocketModel(){ SocketGuid=string.Empty,UserName="user1",Socket=null },
         new SocketModel(){ SocketGuid=string.Empty,UserName="User2",Socket=null },
         new SocketModel(){ SocketGuid=string.Empty,UserName="User3",Socket=null },
          new SocketModel(){ SocketGuid=string.Empty,UserName="User4",Socket=null }


    };
    // string: 要发谁   ArraySegment<byte>：要发送的消息
    public static Dictionary<string, List<ArraySegment<byte>>> chatList = new Dictionary<string, List<ArraySegment<byte>>>();


    public static void AddUser(string socketGuid, string userName, WebSocket socket, CancellationToken token)
    {
        socketlist.ForEach(item =>
        {
            if (userName == item.UserName)
            {
                item.Socket = socket;
                item.SocketGuid = socketGuid;
            }
        });

        if (chatList.ContainsKey(userName) && chatList[userName].Count > 0)
        {
            foreach (var item in chatList[userName])
            {
                socket.SendAsync(item, WebSocketMessageType.Text, true, token);
            }

            // 历史消息重新发送以后呢： 就应该删除掉  
            // 清除消息

        }

    }


    public static void RemoveUser(string socketGuid)
    {
        socketlist.ForEach(item =>
        {
            if (socketGuid == item.SocketGuid)
            {
                item.Socket = null;
                item.SocketGuid = null;
            }
        });
    }


    /// <summary>
    ///  群发消息 包括离线消息
    /// </summary>
    /// <param name="token"></param>
    /// <param name="userName"></param>
    /// <param name="content"></param>
    /// <returns></returns>
    public static async Task SengdMessage(CancellationToken token, string userName, string content)
    {
        ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]); 
        buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes($"{DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff")}{userName}:{content}"));

        foreach (var socketInfo in socketlist)
        {
            if (socketInfo.Socket == null)
            {
                if (chatList.ContainsKey(socketInfo.UserName))
                {
                    chatList[socketInfo.UserName].Add(buffer);
                }
                else
                {
                    chatList.Add(socketInfo.UserName, new List<ArraySegment<byte>>() { buffer });
                }
            }
            else
            {
                await socketInfo.Socket.SendAsync(buffer, WebSocketMessageType.Text, true, token);
            }
        }

    }
}

 

```csharp
 public class ChatManager
 {
     /// <summary>
     /// 每一个Socket对应一个客户端和服务器的连接（也可理解成一个用户）
     ///  
     /// </summary>
     public static List<SocketModel> socketlist = new List<SocketModel>();


     public static void SendOne(string messge, CancellationToken cancellationToken)
     {
         //   user1;你好
         string[] messageArray = messge.Split(';');
         string toUser = messageArray[0];
         string toMessage = messageArray[1];
         var socketModel = socketlist.FirstOrDefault(a => toUser.Equals(a.UserName));
         if (socketModel != null)
         {
             WebSocket toSocket = socketModel.Socket;
             ArraySegment<byte> buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(toMessage)); 
             toSocket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
         } 
     }



     /// <summary>
     /// 添加一个用户（包含了这个用户对应的Socket）
     /// </summary>
     /// <param name="socketGuid"></param>
     /// <param name="userName"></param>
     /// <param name="socket"></param>
     public static void AddUser(string socketGuid, string userName, WebSocket socket)
     {
         socketlist.Add(new SocketModel()
         {
             SocketGuid = socketGuid,
             UserName = userName,
             Socket = socket
         });
     }

     /// <summary>
     /// 删除已经连接的用户
     /// </summary>
     /// <param name="socketGuid"></param>
     public static void RemoveUser(string socketGuid)
     {
         socketlist = socketlist.Where(a => a.SocketGuid != socketGuid).ToList();
     }

     /// <summary>
     ///  群发消息
     /// </summary>
     /// <param name="token"></param>
     /// <param name="userName"></param>
     /// <param name="content"></param>
     /// <returns></returns>
     public static async Task SengdMessage(CancellationToken token, string userName, string content)
     {
         ///WebSocket 消息发送的格式 消息内容的长度
         ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);

         buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes($"{DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff")}{userName}:{content}"));

         ///给每一个Socket （用户） 发送消息 （类似于一个广播的形式）
         foreach (var socketInfo in socketlist)
         {
             await socketInfo.Socket.SendAsync(buffer, WebSocketMessageType.Text, true, token);
         }

     }

 }