第一节：.Net版基于WebSocket的聊天室样例

最新推荐文章于 2023-05-10 22:10:35 发布

zyh444

最新推荐文章于 2023-05-10 22:10:35 发布

阅读量288

点赞数

一. 说在前面的话

　　该篇文章为实时通讯系列的第一节，基于WebSocket编写了一个简易版聊天样例，主要作用是为引出后面SignalR系列的用法及其强大方便之处，通过这个样例与后续的SignalR对比，可以体会到用原生的WebSocket编程的不灵活以及繁琐之处。（PS：下面那个案例编写+调试用了大约2个小时的时间）

　特别强调：该案例只是一个简易版的Demo，实现了一些基本的功能，起到一个基本入门的作用，在一些细节方面的限制、验证、以及关键信息的存放位置是有一定缺陷的，在实际项目中，需要根据实际情况进行调整。

　后面打算以一个真实的微信项目为例【二人夺宝】如下图，介绍里面需要用到的实时通讯技术，即SignalR在里面起到的作用，你会发现如果业务复杂，如果采用原生的WebSocket进行编程，“你能累死”，或者说有些功能很难实现。

　最后以一个真实的App混合开发项目【红猴代派】如下图，介绍用SignalR替代推送技术的实现。

　ps：鉴于保密协议，以上提到的两个项目名称并非最终上线的真实名称。

二. WebSocket简介

　　WebSocket可以通过JS与服务器端建立实时的双向通信，它主要包括：2个核心方法、4个监听函数、1个核心属性。

2个核心方法：

　　① send() 向远程服务器发送信息

　　② close() 关闭与远程服务器的连接

4个监听函数：

　　① onopen 当网络连接建立成功时触发该事件
　　② onerror 当网络发生错误时触发该事件
　　③ onclose 当网络连接被关闭时触发该事件
　　④ onmessage 当websocket接收到服务器发来的消息的时触发该事件

1个核心属性：readyState，它有四种状态

　　① WebSocket.OPEN：表示与服务器已经建立好连接

　　② WebSocket.CLOSED：表示与服务器连接已经断开

　　③ WebSocket.CONNECTING：表示正在尝试与服务建立连接

　　④ WebSocket.CLOSING：表示正在关闭与服务器连接

服务器端主要用到两个方法：

　　① SendAsync() 发送信息给客户端

　　② CloseAsync() 关闭该Socket连接

三. 聊天室实现的功能

　　1. 通过输入登录标记，进行建立连接，会提示当前所有在线的人(包括自己)，登录成功。（Ps：同一个标记不能重复登录）

　　2. 点击关闭连接，断开当前连接，提示除了自己以外的所有人，“某某离开了”。

　　3. 群发功能：给所有在线的人（自己除外）的发送消息。

　　4. 单发功能：点对点发送消息。（需要输入内容和接收人的标识）

四. 代码分享

　　代码主要分为3部分组成：前端html页面、服务器端ashx一般处理程序、封装的消息发送帮助类。

前端页面代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script>

        //封装WebSocket的相关方法
        (function (w) {
            //声明全局对象
            var ws; //websocket对象
            var url = "ws://localhost:9008/webSocketHandler.ashx";   //连接地址
            var mainUitls = {
                //1.初始化基本事件
                init: function () {
                    this.initClick();
                },
                //2.建立通讯事件
                initConnect: function () {
                    var newUrl = url + "?userKey=" + $("#j_userKey").val();
                    ws = new WebSocket(newUrl);
                    //2.1 网络建立连接的时候触发该事件
                    ws.onopen = function () {
                        $('#j_notice').html('已经连接');
                    }
                    //2.2 接受服务器发来消息时触发事件
                    ws.onmessage = function (evt) {
                        $("#j_Msg").append("<li>" + evt.data + "</li>");
                    }
                    //2.3 网络错误时候触发
                    ws.onerror = function (evt) {
                        $('#j_notice').html(JSON.stringify(evt));
                    }
                    //2.4 当连接关闭的时候触发该事件
                    ws.onclose = function () {
                        //这里根据实际场景来编写 (比如断线重连机制)
                        //该版本只是简单的给个提示
                        $('#j_notice').html("连接断开");
                    }
                },
                //3. 各种点击事件
                initClick: function () {
                    //3.1 建立连接
                    $("#j_connect").on("click", function () {
                        if ($("#j_userKey").val()=="") {
                            $('#j_notice').html("请输入用户标记");
                            return;
                        }
                        mainUitls.initConnect();
                    });
                    //3.2 关闭连接
                    $("#j_close").on("click", function () {
                        ws.close();
                    });
                    //3.3 群发发送消息
                    $("#j_send").on("click", function () {
                        //表示与服务器已经建立好连接
                        if (ws.readyState == WebSocket.OPEN) {
                            ws.send($('#j_content').val());
                        }
                         //表示与服务器连接已经断开
                        else if (ws.readyState == WebSocket.CLOSED) {
                            $('#j_notice').html('与服务器连接已经断开');
                        }
                        //表示正在尝试与服务建立连接
                        else if (ws.readyState == WebSocket.CONNECTING) {
                            $('#j_notice').html('正在尝试与服务建立连接');
                        }
                        //正在关闭与服务器连接
                        else if (ws.readyState == WebSocket.CLOSING) {
                            $('#j_notice').html('正在关闭与服务器连接');
                        }

                    });
                    //3.4 单发消息
                    $("#j_send2").on("click", function () {
                        var msg = $('#j_receiveUserKey').val();
                        if (msg=="") {
                            $('#j_notice').html('请输入接收人的标识');
                            return;
                        }
                        //下面对内容进行拼接
                       // "$--$--**" + msg + "$--$--**" + "发送的内容";

                        var finalMsg = "$--$--**" + msg + "$--$--**" + $('#j_content').val();

                        //表示与服务器已经建立好连接
                        if (ws.readyState == WebSocket.OPEN) {
                            ws.send(finalMsg);
                        }
                        //表示与服务器连接已经断开
                        else if (ws.readyState == WebSocket.CLOSED) {
                            $('#j_notice').html('与服务器连接已经断开');
                        }
                        //表示正在尝试与服务建立连接
                        else if (ws.readyState == WebSocket.CONNECTING) {
                            $('#j_notice').html('正在尝试与服务建立连接');
                        }
                        //正在关闭与服务器连接
                        else if (ws.readyState == WebSocket.CLOSING) {
                            $('#j_notice').html('正在关闭与服务器连接');
                        }

                    });
                }

            };

            w.mainUitls = mainUitls;
        })(window)

        $(function () {
            mainUitls.init();
        });
    </script>
</head>
<body>
    <div>
        <div><span>提示：</span><span id="j_notice"></span></div>
        <div style="margin-top:20px">
            <input type="text" name="name" value="" placeholder="请输入登录标识" id="j_userKey" />
            <button id="j_connect">建立连接</button>
            <button id="j_close">关闭连接</button>
        </div>
        <div style="margin-top:20px">
            <input type="text" value="" placeholder="请输入发送内容" id="j_content" />
            <button id="j_send">群发</button>
        </div>

        <div style="margin-top:20px">
            <input type="text" value="" placeholder="请输入接收人标识" id="j_receiveUserKey" />
            <button id="j_send2">单发</button>
        </div>
        <div>
            <ul id="j_Msg"></ul>
        </div>
    </div>
</body>
</html>

一般处理程序代码：

using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.SessionState;
using System.Web.WebSockets;

namespace WebSocketDemo
{
    /// <summary>
    /// webSocketHander
    /// </summary>
    public class webSocketHandler : IHttpHandler, IRequiresSessionState
    {
        //用户登记标识
        private string userKey = "";
        public void ProcessRequest(HttpContext context)
        {
            if (context.IsWebSocketRequest)
            {
                this.userKey = context.Request.QueryString["userKey"];
                context.AcceptWebSocketRequest(ProcessChat);
            }
            else
            {
                context.Response.Write("不是WebSocket请求");
            }
        }
        private async Task ProcessChat(AspNetWebSocketContext context)
        {
            WebSocket socket = context.WebSocket;
            CancellationToken cancellationToken = new CancellationToken();
            bool isExits = WebManager.AddUser(userKey, socket);
            if (isExits == false)
            {
                //表示该用户有在线
                await WebManager.SendToMySelf(cancellationToken, $"用户【{this.userKey}】 已在线", this.userKey);
            }
            else
            {
                //表示登录成功
                //某人登陆后，给群里其他人发送提示信息(本人除外)
                await WebManager.SendLoginSucesssNotice(cancellationToken, $"用户【{this.userKey}】 进入聊天室,当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
                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)
                    {
                        //移除该用户对应的socket对象
                        WebManager.RemoveUser(userKey);
                        //发送离开提醒
                        await WebManager.SendOutNotice(cancellationToken, $"用户【{this.userKey}】 离开聊天室,当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
                        await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, String.Empty, cancellationToken);
                    }
                    //获取是发送消息指令
                    else
                    {
                        string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);
                        //这里要区分是单发还是群发(通过与前端在内容开头做一个标记，来区分是单发还是群发)
                        if (userMsg.Length > 8 && userMsg.Substring(0, 8) == "$--$--**")
                        {
                            //表示是单发，截取内容和接受者的标记
                            var array = userMsg.Split(new string[] { "$--$--**" }, StringSplitOptions.None);
                            var receiveNotice = array[1];
                            string content = $"用户【{this.userKey}】 发来消息：{array[2]},当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
                            WebManager.SendSingleMessage(cancellationToken, content, receiveNotice);
                        }
                        else
                        {
                            //表示群发信息 
                            string content = $"用户【{this.userKey}】 群发消息：{userMsg},当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
                            WebManager.SendAllMessage(cancellationToken, content, userKey);
                        }
                    }
                }
            }

        }

        /// <summary>
        ///  true 如果 System.Web.IHttpHandler 实例是可重复使用; 否则为 false。
        /// </summary>
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


}

帮助类代码：

using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.SessionState;


namespace WebSocketDemo
{
    /// <summary>
    /// webSocket帮助类
    /// </summary>
    public class WebManager
    {
        /// <summary>
        /// 这采用ConcurrentDictionary字典，是线程安全的，不需要加锁
        /// </summary>
        private static ConcurrentDictionary<string, WebSocket> _UserDictionary = new ConcurrentDictionary<string, WebSocket>();

        #region 01-增加用户
        /// <summary>
        /// 增加用户
        /// </summary>
        /// <param name="userKey"></param>
        /// <param name="socket"></param>
        public static bool AddUser(string userKey, WebSocket socket)
        {

            bool flag = _UserDictionary.Select(d => d.Key).ToList().Contains(userKey);
            if (flag == false)
            {
                _UserDictionary[userKey] = socket;
                return true;
            }
            else
            {
                //表示该用户在线
                return false;

            }
        }
        #endregion

        #region 02-移除用户
        /// <summary>
        /// 移除用户
        /// </summary>
        /// <param name="userKey"></param>
        public static void RemoveUser(string userKey)
        {
            WebSocket socket = null;
            _UserDictionary.TryRemove(userKey, out socket);
        }
        #endregion

        #region 03-登录提醒

        /// <summary>
        /// 登录提醒（包括自己）
        /// </summary>
        /// <param name="cancellationToken"></param>
        /// <param name="content"></param>
        /// <returns></returns>
        public static async Task SendLoginSucesssNotice(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);
            }
        }

        #endregion

        #region 04-离开提醒

        /// <summary>
        /// 离开提醒
        /// </summary>
        /// <param name="cancellationToken"></param>
        /// <param name="content"></param>
        /// <returns></returns>
        public static async Task SendOutNotice(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);
            }
        }

        #endregion

        #region 05-群发消息，不包括自己
        /// <summary>
        /// 群发消息，不包括自己
        /// </summary>
        /// <param name="cancellationToken"></param>
        /// <param name="content"></param>
        /// <param name="myUserKey">当前用户标记</param>
        /// <returns></returns>
        public static void SendAllMessage(CancellationToken cancellationToken, string content, string myUserKey)
        {
            try
            {
                ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
                //群发消息，但不包括自己
                foreach (var item in _UserDictionary)
                {
                    if (item.Key.ToString() != myUserKey)
                    {
                        item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
                    }
                }
            }
            catch (Exception ex)
            {
                var msg = ex.Message;
            }
        }
        #endregion

        #region 06-单发消息
        /// <summary>
        /// 单发消息
        /// </summary>
        /// <param name="cancellationToken"></param>
        /// <param name="content"></param>
        /// <param name="receiveKey">接收者的标识</param>
        /// <returns></returns>
        public static void SendSingleMessage(CancellationToken cancellationToken, string content, string receiveKey)
        {
            try
            {
                ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
                //单发消息
                foreach (var item in _UserDictionary)
                {
                    if (item.Key.ToString() == receiveKey)
                    {
                        item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
                    }
                }
            }
            catch (Exception ex)
            {
                var msg = ex.Message;
            }
        }
        #endregion

        #region 07-给自己发送消息

        /// <summary>
        /// 给自己发送消息
        /// </summary>
        /// <param name="cancellationToken"></param>
        /// <param name="content"></param>
        /// <param name="userKey">当前标记</param>
        /// <returns></returns>
        public static async Task SendToMySelf(CancellationToken cancellationToken, string content,string userKey)
        {
            ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
            buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
            //离开提醒
            foreach (var item in _UserDictionary)
            {
                if (item.Key.ToString() == userKey)
                {
                  await  item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
                }
            }
        }
        #endregion

    }
}

最终实现效果：

五. 局限与后续计划

　　通过上面这个小例子，我觉得WebSocket主要有这么两个缺陷：

　　1. 众所周知，很多低版本的浏览器不支持。

　　2. 代码写起来繁琐，客户端和服务器端之间不能自行指定方法名进行直接调用，比如上面单发和群发在客户端是只能通过Send方法进行发送到服务器端固定的位置，使得不得不自己约定规则进行区分；再比如：客户端消息的接受只能通过onmessage进行监听，非常局限不灵活。

　　而SignalR很好的解决了上面的两个问题。

　　 补充一张websocket的兼容性，下图来自于网络。

　　后续章节开始详细的介绍SignalR的用法，大约3天一篇，有兴趣的朋友可以关注该系列，互相讨论，共同提高。

zyh444

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一节：.Net版基于WebSocket的聊天室样例

一. 说在前面的话　　该篇文章为实时通讯系列的第一节，基于WebSocket编写了一个简易版聊天样例，主要作用是为引出后面SignalR系列的用法及其强大方便之处，通过这个样例与后续的SignalR对比，可以体会到用原生的WebSocket编程的不灵活以及繁琐之处。（PS：下面那个案例编写+调试用了大约2个小时的时间）　特别强调：该案例只是一个简易版的Demo，实现了一些基本的功能，...
复制链接

扫一扫