技术思绪摘录旅行
有这样一种场景,我希望服务端来通知客户端,而且要及时,所以确定了最好是使用WS协议,比如炒股界面数据更新、虚拟货币交易所数据更新,要求流量低而且快速及时,请求一次,一旦连接上,可一直通讯。

之前也有分享其他方式:

1、.net 实现Socket通信(第一种方式)

2、.net 实现Socket通信(第二种方式)


现在来说另外一个,使用第三方组件来完成的,底层都一样的。


1、创建一个Web网站来当成客户端,再创建一个控制台程序当成服务端提供服务,我们先写服务端。


2、控制台程序需要引用Newtonsoft.Json、WebSocketSharpFork两个包。


image.png


3、编写一个通讯处理类:Chat.cs

        

    这里面负责处理所有的消息和连接,最重要的就是其中的OnMessage方法,如果需要和数据库对接,可以在OnMessage调用WCF或者自己的服务,不推荐在服务端直接操作数据库。


using Newtonsoft.Json;
using System;
using WebSocketSharp;
using WebSocketSharp.Server;

namespace WebSocketSharpDemo
{
    /// <summary>
    ///操作类
    /// </summary>
    class Chat : WebSocketBehavior
    {
        /// <summary>
        ///链接
        /// </summary>
        protected override void OnOpen()
        {
            Console.WriteLine($"客户端[{this.ID}]连上了");
            base.OnOpen();
        }

        /// <summary>
        ///消息处理
        /// </summary>
        protected override void OnMessage(MessageEventArgs e)
        {
            string data = e.Data;
            /*JToken param = JToken.Parse(data);
              得到用户数据 进行逻辑处理
             */
            SendAsync(JsonConvert.SerializeObject(new { code = 200, msg = "收到你的数据:" + data }), null);
        }

        /// <summary>
        ///关闭
        /// </summary>
        protected override void OnClose(CloseEventArgs e)
        {
            Console.WriteLine($"客户端[{this.ID}]关闭了");
            base.OnClose(e);
        }

        /// <summary>
        ///错误
        /// </summary>
        protected override void OnError(ErrorEventArgs e)
        {
            Console.WriteLine($"客户端[{this.ID}]出错:{e.Message}");
            base.OnError(e);
        }
    }
}


4、修改Program.csmain方法


using System;
using WebSocketSharp.Server;

namespace WebSocketSharpDemo
{
    class Program
    {
        static void Main(string[] args)
        {
            WebSocketServer wssv = new WebSocketServer(6688);
            wssv.AddWebSocketService<Chat>("/Chat");
            wssv.Start();
            Console.WriteLine("服务器启动,按任意键终止服务器。");
            Console.ReadKey(true);
            wssv.Stop();
        }
    }
}


到这里,最基本的服务端就写完了。


image.png


5、客户端就相对简单,这里写个示例。


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>WebSocket测试页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <div>
        用户名:<input type="text" id="username" value="carson" /> 密码:<input type="text" id="userpass" value="pass123" />
        <button type="button" id="btnSub">submit</button>
    </div>
    <ul id="outCnt"></ul>
    <script>
        var echo = function(text) {
            var echoone = function(text) {
                var dom = document.createElement("li");
                var t = document.createTextNode(text);
                dom.appendChild(t);
                var cnt = document.getElementById("outCnt");
                cnt.appendChild(dom);
            };
            if (Array.isArray(text)) {
                text.map(function(t) {
                    echoone(t);
                });
            } else {
                echoone(text);
            }
        };


        let wsc;
        var wsurl = "ws://localhost:6688/Chat";
        (function() {
            if ("WebSocket" in window) {
                //初始化连接
                echo("正在连接");
                wsc = new WebSocket(wsurl);
                wsc.onopen = function() {
                    echo("连接成功");
                };
                wsc.onclose = function() {
                    echo("服务关闭");
                };
                wsc.onmessage = function(e) {
                    echo(e.data);
                    console.log(e.data);
                };

                //提交通讯
                document.getElementById("btnSub").addEventListener('click', function() {
                    var username = document.getElementById("username").value;
                    var userpass = document.getElementById("userpass").value;
                    if (wsc.readyState == 1) {
                        wsc.send(JSON.stringify({
                            UserName: username,
                            UserPass: userpass
                        }));
                    } else {
                        echo("服务不可用,可能是凉了");
                    }
                });
            }
        })();
    </script>
</body>

</html>


6、写完了,我们F12看看效果,你会发现,一旦连接上,再次通讯就不会产生新的请求,都是在之前的连接上完成的。


image.png




CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫