基于websocket的网页即时通讯(可传附件图片涂鸦、最小化状态通知).NET，winform客户端、服务端

公司网站需要即时通讯，就研究了下

主要以下功能：

websocket通讯，网页端即时通讯，可以发送表情，可以发送附件，可以涂鸦，可以实现客服一对多聊天，winform做服务端负责收发，notification提醒，

一番百度下来发现websocket做客户端+superwebsocket服务端比较靠谱

又想最小化无法发现消息，加了notification(localhost可以但是域名需要https，呵呵哒)

想着干脆做个winform客户端接收提醒？似乎superwebsocket支持的不好

或者存数据库，独立winform socket处理？

先上图？：

下午又完善了聊天窗口，以及用&拆分不太合适，改用“|”分割

今天有空又更新了，winform客户端上线，BS2CS

20180521更新

优化界面显示、实现客服单对多会话检测、创建

客服winform暂时放弃，会话在数据库保存、附件在服务器保存需要另外指定具体删除规则（两日一次之类）

目前为止实验阶段，为达目的不择手段，代码乱是可以想见的，后面会整理

以下思路：

1.SuperWebSocket做服务端监听并转发

    ①.NuGet安装SuperWebSocket

    ②.NuGet安装log4net

using System;
using System.Configuration;
using SuperWebSocket;
using System.Windows.Forms;
using System.Collections.Generic;
namespace cmd
{

    class socketServer_d
    {
        private const string ip = "192.168.1.72";
        private const int port = 2018;
        private static WebSocketServer ws = null;
        private static TextBox textBox;
        private static Dictionary<string, WebSocketSession> sessions = new Dictionary<string, WebSocketSession>();//记住所有会话
        public socketServer_d(TextBox t){
            textBox = t;
            ws = new WebSocketServer();//实例化WebSocketServer  
            ws.NewSessionConnected += ws_NewSessionConnected;//有新会话握手并连接成功  
            ws.SessionClosed += ws_SessionClosed;//有会话被关闭 可能是服务端关闭 也可能是客户端关闭  
            ws.NewMessageReceived += ws_NewMessageReceived;//有客户端发送新的消息  
            Start(); 
        }
        static void ws_NewSessionConnected(WebSocketSession session)
        {
            textBox.AppendText(DateTime.Now + "  与客户端:" + session.RemoteEndPoint.Address + "创建新会话\r\n");
        }

        static void ws_SessionClosed(WebSocketSession session, SuperSocket.SocketBase.CloseReason value)
        {
            foreach (string item in sessions.Keys)
            { 
                if (sessions[item] == session) {
                    sessions.Remove(item);
                }
            }
            textBox.AppendText(DateTime.Now + "  与客户端:" + session.RemoteEndPoint.Address + "的会话被关闭 原因：" + value + "\r\n");
        }

        static void ws_NewMessageReceived(WebSocketSession session, string value)
        {
            var msg = string.Format("{0:HH:MM:ss} {1}: {2}", DateTime.Now, session.RemoteEndPoint.Address, value)+ "\r\n";
            textBox.AppendText(msg+"\r\n");
            //确认连接是否成功
            if (value.StartsWith("try_connect"))
            {
                string from = value.Split('&')[1].Split('=')[1];
                string to = value.Split('&')[2].Split('=')[1];
                if (from == ""  )
                {
                    session.Send("-1");
                    return;
                }
                sessions.Add(from, session);//记录会话☆
                session.Send("1");
                return;
            }

            //返回给客户端  客户端接收xx.data就可以了  
            string message = "";//0未收到，1确认连接，2消息发送
            try
            {
                if (string.IsNullOrEmpty(value))
                { 
                    session.Send("0");
                    return;
                }
                else
                {
                    //解析消息
                    if (value.StartsWith("msg_send"))
                    {
                        string from = value.Split('&')[1].Split('=')[1];
                        string to = value.Split('&')[2].Split('=')[1];
                        string text = value.Split('&')[3].Substring(5, value.Split('&')[3].Length-5);
                        if (from == "" || to == "")
                        {
                            session.Send("-1");
                            return;
                        }
                        else
                        {
                            WebSocketSession session_rec = sessions[to];
                            if (session_rec==null)
                            {
                                session.Send("-1");
                                return;
                            }
                            else
                            {
                                session_rec.Send("server_conversation&from="+from+"&text="+text);
                            }
                        } 
                        sessions.Add(from, session);//记录会话☆
                        session.Send("1");
                        return;
                    }
                    message = "2";
                }
            }
            catch (Exception ex)
            {
                message = ex.Message;
            }
            if (!string.IsNullOrEmpty(message))
            {
                //发送消息到指定对象（socket会话）
                session.Send(message);
            }
        }

        /// <summary>  
        /// 启动服务  
        /// </summary>  
        /// <returns></returns>  
        public static void Start()
        {
            if (!ws.Setup(ip, port))
            { 
                textBox.AppendText("WebSocketServer 设置WebSocket服务侦听地址失败" + "\r\n");
                return;
            }
            if (!ws.Start())
            {
                textBox.AppendText("WebSocketServer 启动WebSocket服务侦听失败" + "\r\n");
                return;
            }
            textBox.AppendText("WebSocketServer 启动服务成功" + "\r\n");
        }

        /// <summary>  
        /// 停止侦听服务  
        /// </summary>  
        public static void Stop()
        {
            if (ws != null)
            {
                ws.Stop();
            }
        }
    }
}

自己定了个简单的发送接收规则（说起来就是协议原形吧），代码有点乱，服务端基于收发规则、会话管理其实应该抽出一个管理Class，客户端亦可，我笨就不搞了，你们来吧。

1.WebSocket客户端

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>WebSocket</title>
    <%-- UeDITOR --%>
    <script type="text/javascript" charset="gbk" src="js/ueditor.config.js"></script>
    <script type="text/javascript" charset="gbk" src="js/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="gbk" src="js/lang/zh-cn/zh-cn.js"></script>

    



    <script type="text/javascript">
        // 打开一个 web socket
        var ws ;
        window.onload = function () {
            // 获得通知权限
            Notification.requestPermission();
             
            WebSocketTest();
        }
        function WebSocketTest() {
            ws = new WebSocket("ws://192.168.1.72:2018");
            var ifconnected = false;
            if ("WebSocket" in window) {
               //alert("您的浏览器支持 WebSocket!");
                 
                ws.onopen = function () {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    ws.send("try_connect&from=<%=from%>&to=<%=to%>");
                };
                ws.onmessage = function (evt) {
                    var received_msg = evt.data;
                    if (received_msg=="1") {
                        ifconnected = true;
                        document.getElementById("d_con").style.backgroundColor = "green";
                    } else {
                        if (received_msg.split("&")[0] == "server_conversation") {
                            document.getElementById("d_con").style.backgroundColor = "green";
                            //页面显示
                            document.getElementById("d_ul").innerHTML = document.getElementById("d_ul").innerHTML + "<li style='color:red'>" + received_msg.split("&")[1].split("=")[1] + ":" + received_msg.split("&")[2].substring(5) + "</li>"
                            //弹窗
                            NoticeWindow(received_msg.split("&")[1].split("=")[1], received_msg.split("&")[2].split("=")[1]);
                        }
                    }
                }; 
                ws.onclose = function () {
                    // 关闭 websocket
                    ifconnected = false;
                    document.getElementById("d_con").style.backgroundColor = "red";
                };
            }
            else {
                // 浏览器不支持 WebSocket
                document.getElementById("d_con").style.backgroundColor = "red";
                ifconnected = false;
            }
        }
        //发送消息
        function sendMsg() {
            //取值
            var from = document.getElementById("d_from").value;
            var text = UE.getEditor('d_text').getContent();
            //清空输入
            UE.getEditor('d_text').setContent('');


            var to = document.getElementById("d_to").value;
            //alert(text)
            document.getElementById("d_ul").innerHTML = document.getElementById("d_ul").innerHTML + "<li style='color:green'>"+from+":" + text + "</li>"
            var tranStr = "msg_send&from=" + from + "&to=" + to + "&text=" + text;
            ws.send(tranStr);
        }
        function NoticeWindow(from,msg) { 
            new Notification(from+"：", {
                body: msg+"<div style='width:100px;height:100px;border-radius:50px;background-color:red'></div>",
                    icon: 'https://avatars6.githubusercontent.com/u/496048?v=4&s=460'
                }); 
        }
        function HTMLEncode(html) {
            var temp = document.createElement("div");
            (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
            var output = temp.innerHTML;
            temp = null;
            return output;
        }
    </script>

</head>
<body>
    <form runat="server">
    <div id="sse">
        链接状态：<p id="d_con" style="width:10px;height:10px;background-color:gray;border-radius:5px"></p> 
        <table>
            <tr><td>编    号：</td><td><input runat="server" type="text" id="d_from"  /></td></tr>
            <tr>
                <td>
                    内    容：
                </td>
                <td>
                <script id="d_text" type="text/plain" style="width:380px;height:300px;"></script>
                                </td> 
            </tr>
            <tr><td>接受编号：</td><td><input runat="server" type="text" id="d_to" /></td></tr>
            <tr>
                <td colspan="2"><a href="javascript:sendMsg()">发送</a></td> 
            </tr>
        </table> 
        <ul id="d_ul">
            
        </ul>
    </div> 
        <button id="button">
            弹窗
        </button>
        </form>
</body>
    <script type="text/javascript">

        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('d_text');
        </script>
</html>

编辑内容通过UEditor（自带表情、涂鸦、附件简直无敌好吗）

注意点：socket不能走80端口具体多少范围我也不研究了

下载链接：点击打开链接