C#Socket通讯(1)

前言
因为自己需要开发一款自己的游戏，因为设计网络方面，所以我找了很多的资料，再加上考虑到Unity游戏客户端直接连接数据库很容易导致数据库泄露，再加上网上很多的服务端都是用控制台做的，所以我就想做个图形化的服务端，数据一目了然，所以决定用MVC做服务端，实现中转处理数据

设计思路
现在需要做的还是服务端的UI设计，所以先写前端的代码，前端的界面是不开放的，专门给服务端的管理员展示可视化的效果

HTML

<header>
        <h1>XXXX数据实时监测 1.0</h1>
        <h3 class="ServerStatus">服务器状态<span></span></h3>
        <h3 class="ServerAddress">服务器地址:<span>@ViewData["ServerAddress"]</span></h3>
        <h3 class="OnlineClientNum">在线客户端:<span>0</span></h3>
    </header>

    <div>
        <div class="YContral">
            <div class="OAO_YC OAO_YC_On"><span></span><p>服务开关</p></div>
            <div class="TXT_YC"><span contenteditable="true" property="输入文本"></span><p>输入文本</p></div>
            <div class="BTN_YC"><p>发送消息</p></div>
        </div>
    </div>
    <div class="RealTimeNws">
        <table>
            <thead>
                <tr>
                    <td>日期</td>
                    <td>状态码</td>
                    <td>状态信息</td>
                    <td>数据</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="OnlineClientList">
        <table>
            <thead>
                <tr>
                    <td>客户端地址</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

CSS

@font-face {
    font-family: 'poppin';
    src: url('../Font/poppin.ttf') format('truetype');
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: rgba(0, 0, 0, 0.00)
}

::-webkit-scrollbar-thumb {
    width: 0px;
    height: 0px;
    background: rgba(0, 0, 0, 0.00)
}

header h1, header h3 {
    display: inline-block;
}

header h3 {
    float: right;
    padding:0px 10px;
}

header .ServerStatus span {
    width: 18px;
    height: 18px;
    border-radius: 50px;
    background: #ccc;
    display: inline-block;
    margin-left: 5px;
    transform: translateY(2px);
}

* {
    font-family: 'poppin';
}

body {
    margin: 0;
    padding: 0;
    background: #4e5b75;
    color: #fff;
}
/*消息表格*/

.RealTimeNws {
    width:80%;
    float:left;
}

.RealTimeNws table {
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}

    .RealTimeNws table thead {
        font-size: 20px;
        border-bottom: 2px solid #ccc;
        box-sizing: border-box;
    }

        .RealTimeNws table thead tr {
            display: flex;
        }

            .RealTimeNws table thead tr td {
                flex: auto;
            }

                .RealTimeNws table thead tr td:nth-child(1) {
                    width: 10%;
                }

                .RealTimeNws table thead tr td:nth-child(2) {
                    width: 5%;
                }

                .RealTimeNws table thead tr td:nth-child(3) {
                    width: 55%;
                }

                .RealTimeNws table thead tr td:nth-child(4) {
                    width: 30%;
                }

    .RealTimeNws table tbody {
        font-size: 16px;
        max-height: 300px;
        overflow: auto;
    }

        .RealTimeNws table tbody tr {
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            display: flex;
        }

            .RealTimeNws table tbody tr td {
                padding: 10px 0px;
                letter-spacing: 2px;
                flex: auto;
            }

                .RealTimeNws table tbody tr td:nth-child(1) {
                    width: 10%;
                }

                .RealTimeNws table tbody tr td:nth-child(2) {
                    width: 5%;
                }

                .RealTimeNws table tbody tr td:nth-child(3) {
                    width: 55%;
                }

                .RealTimeNws table tbody tr td:nth-child(4) {
                    width: 30%;
                }

/*在线客户端列表表格*/

.OnlineClientList {
    width:20%;
    float:left;
}

.OnlineClientList table {
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}

    .OnlineClientList table thead {
        font-size: 20px;
        border-bottom: 2px solid #ccc;
        box-sizing: border-box;
    }

        .OnlineClientList table thead tr {
            display: flex;
        }

            .OnlineClientList table thead tr td {
                flex: auto;
            }

                .OnlineClientList table thead tr td:nth-child(1) {
                    width: 10%;
                }

                .OnlineClientList table thead tr td:nth-child(2) {
                    width: 5%;
                }

                .OnlineClientList table thead tr td:nth-child(3) {
                    width: 55%;
                }

                .OnlineClientList table thead tr td:nth-child(4) {
                    width: 30%;
                }

    .OnlineClientList table tbody {
        font-size: 16px;
        max-height: 300px;
        overflow: auto;
    }

        .OnlineClientList table tbody tr {
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            display: flex;
        }

            .OnlineClientList table tbody tr td {
                padding: 10px 0px;
                letter-spacing: 2px;
                flex: auto;
            }

                .OnlineClientList table tbody tr td:nth-child(1) {
                    width: 10%;
                }

                .OnlineClientList table tbody tr td:nth-child(2) {
                    width: 5%;
                }

                .OnlineClientList table tbody tr td:nth-child(3) {
                    width: 55%;
                }

                .OnlineClientList table tbody tr td:nth-child(4) {
                    width: 30%;
                }
/*控件*/
.YContral {
    display: flex;
}
/*开关组*/
.OAO_YC {
    width: 65px;
    height: 25px;
    background: #ccc;
    border-radius: 50px;
    padding: 5px;
    transition: all ease 0.5s;
    position: relative;
}

    .OAO_YC p {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        height: 100%;
        width: 75px;
        text-align: center;
        line-height: 2.7em;
        opacity: 0;
        transition: all ease 0.5s;
    }

    .OAO_YC:hover p {
        opacity: 1;
    }

    .OAO_YC:hover span {
        opacity: 0.3;
    }

    .OAO_YC span {
        height: 100%;
        background: #fff;
        border-radius: 50px;
        display: block;
        width: 36px;
        transition: all ease 0.5s;
    }

.OAO_YC_On {
    background: #0094ff;
    transition: all ease 0.5s;
}

    .OAO_YC_On span {
        transform: translateX(30px);
    }

/*文本组*/
.TXT_YC {
    width: 150px;
    height: 25px;
    background: #0094ff;
    color:#fff;
    border-radius: 50px;
    padding: 5px;
    transition: all ease 0.5s;
    position: relative;
}

    .TXT_YC p {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        height: 100%;
        width: 75px;
        text-align: center;
        line-height: 2.7em;
        opacity: 0;
        transition: all ease 0.5s;
        z-index: 0;
    }

    .TXT_YC:hover p {
        opacity: 0.3;
    }

    .TXT_YC:hover span {
        opacity: 1;
    }

    .TXT_YC span {
        height: 100%;
        display: block;
        padding: 0px 10px;
        width: 88%;
        transition: all ease 0.5s;
        outline: none;
        position: absolute;
        left: 0px;
        z-index: 1;
        overflow-x:auto;
        white-space: nowrap;
    }
/*按钮组*/
.BTN_YC {
    width: 65px;
    height: 25px;
    background: rgba(0, 148, 255, 1);
    border-radius: 50px;
    padding: 5px;
    transition: all ease 0.5s;
    position: relative;
}

    .BTN_YC:active {
        background: rgba(0, 148, 255, 0.45);
    }

    .BTN_YC p {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    height: 100%;
    width: 75px;
    text-align: center;
    line-height: 2.7em;
    transition: all ease 0.5s;
}

JS

var OldMsg = { DateTimeS: "", StateCodeI: "", StateTextS: "", DataO: "" };
        //实时获取在线人数
        var OnlineNumber = new XMLHttpRequest();
        var getMsg = new XMLHttpRequest();
        var xhr2 = new XMLHttpRequest();
        var xhr3 = new XMLHttpRequest();
        //获得客户的数据
        var ClientXHR = new XMLHttpRequest();

        //控件
        document.querySelectorAll(".OAO_YC")[0].onclick = function () {
            if (this.className.indexOf("OAO_YC_On") == -1) {
                //开启
                this.classList.add("OAO_YC_On");

            } else {
                //关闭
                this.classList.remove("OAO_YC_On");
                xhr2.open("get", "/WebSocket/CloseServer");
                xhr2.send();
            }
        }

        setInterval(function () {
            OnlineNumber.open("get", "/WebSocket/OnlineNumber");
            OnlineNumber.send();
            OnlineNumber.onreadystatechange = function () {
                if (OnlineNumber.readyState == 4 && OnlineNumber.status == 200) {
                    document.querySelectorAll("header .OnlineClientNum span")[0].innerHTML = OnlineNumber.response;
                }
            }

            getMsg.open("get", "/WebSocket/getMsg", true);
            getMsg.responseType = "json";
            getMsg.send();
            getMsg.onreadystatechange = function () {
                if (getMsg.readyState == 4 && getMsg.status == 200) {
                    //console.log(getMsg);
                    if (getMsg.response.StateCodeI == 10 || getMsg.response.StateCodeI == 200) {
                        if (OldMsg.DateTimeS != getMsg.response.DateTimeS || OldMsg.StateCodeI != getMsg.response.StateCodeI || OldMsg.StateTextS != getMsg.response.StateTextS || OldMsg.DataO != getMsg.response.DataO) {
                            OldMsg.DateTimeS = getMsg.response.DateTimeS;
                            OldMsg.StateCodeI = getMsg.response.StateCodeI;
                            OldMsg.StateTextS = getMsg.response.StateTextS;
                            OldMsg.DataO = getMsg.response.DataO;
                            document.querySelectorAll(".RealTimeNws")[0].querySelectorAll("table tbody")[0].innerHTML += "<tr><td>" + getMsg.response.DateTimeS + "</td><td>" + getMsg.response.StateCodeI + "</td><td style='color:greenyellow'>" + getMsg.response.StateTextS + "</td><td>" + getMsg.response.DataO + "</td></tr>"
                        }
                    } else if (getMsg.response.StateCodeI == 100) {
                        document.querySelectorAll("header .ServerStatus span")[0].style = "background:greenyellow";
                        document.querySelectorAll("header .ServerAddress span")[0].innerHTML = getMsg.response.DataO;

                    } else if (getMsg.response.StateCodeI == 10) {
                        document.querySelectorAll("header .ServerStatus span")[0].style = "background:#ccc";
                        document.querySelectorAll("header .ServerAddress span")[0].innerHTML = ""
                    } else if (getMsg.response.StateCodeI == 120 || getMsg.response.StateCodeI == 140) {
                        if (OldMsg.DateTimeS != getMsg.response.DateTimeS || OldMsg.StateCodeI != getMsg.response.StateCodeI || OldMsg.StateTextS != getMsg.response.StateTextS || OldMsg.DataO != getMsg.response.DataO) {
                            OldMsg.DateTimeS = getMsg.response.DateTimeS;
                            OldMsg.StateCodeI = getMsg.response.StateCodeI;
                            OldMsg.StateTextS = getMsg.response.StateTextS;
                            OldMsg.DataO = getMsg.response.DataO;
                            document.querySelectorAll(".RealTimeNws")[0].querySelectorAll("table tbody")[0].innerHTML += "<tr><td>" + getMsg.response.DateTimeS + "</td><td>" + getMsg.response.StateCodeI + "</td><td style='color:skyblue'>" + getMsg.response.StateTextS + "</td><td>" + getMsg.response.DataO + "</td></tr>"
                        }
                    } else {
                        if (OldMsg.DateTimeS != getMsg.response.DateTimeS || OldMsg.StateCodeI != getMsg.response.StateCodeI || OldMsg.StateTextS != getMsg.response.StateTextS || OldMsg.DataO != getMsg.response.DataO) {
                            OldMsg.DateTimeS = getMsg.response.DateTimeS;
                            OldMsg.StateCodeI = getMsg.response.StateCodeI;
                            OldMsg.StateTextS = getMsg.response.StateTextS;
                            OldMsg.DataO = getMsg.response.DataO;
                            document.querySelectorAll(".RealTimeNws")[0].querySelectorAll("table tbody")[0].innerHTML += "<tr><td>" + getMsg.response.DateTimeS + "</td><td>" + getMsg.response.StateCodeI + "</td><td style='color:red'>" + getMsg.response.StateTextS + "</td><td>" + getMsg.response.DataO + "</td></tr>"
                        }
                    }

                };

            }

            var ClientData ="";
            //请求获得客户数据
            ClientXHR.open("get", "/WebSocket/ClientInfodata");
            getMsg.responseType = "json";
            ClientXHR.send();
            ClientXHR.onreadystatechange = function () {
                if (ClientXHR.readyState == 4 && ClientXHR.status == 200) {

                    if (ClientData != ClientXHR.response) {
                        ClientData = ClientXHR.response;
                        document.querySelectorAll(".OnlineClientList table tbody")[0].innerHTML += ClientXHR.response;
                    }

                    //JSON callback ClientXHR.response;

                    console.log(ClientData,ClientXHR.response);
                    //callback(ClientXHR.response)
                }
            }

        }, 100)

        document.querySelectorAll(".BTN_YC")[0].onclick = function () {
            xhr3.open("get", "/WebSocket/Send?str=" + document.querySelectorAll(".TXT_YC")[0].querySelectorAll("span")[0].innerText);
            xhr3.send();
        }

展示效果

下一篇我们写控制器的代码，实现启动Socket服务的启动以及监听与发送数据