使用CEfSharp之旅（10）终极大杀器： cefsharp 使用js获取 websocket 的数据-CFANZ编程社区

这个cefsharp的专栏建立也有将近三年了。

本人的研究这块的群，也已经进入了不少的小伙伴了。

疫情期间在家有时间把，把这块的代码整理了下，发出来，给需要的小伙伴。

终极解决方案哦。而且是经过众多网友测试可行的。哈哈，等不及了，直接看代码

cef 版本57, 小伙伴注意你们的版本哦。

一、创建websocket 的server 和client 端

这里server代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Fleck;

namespace WSServer
{
    class Program
    {
        static void Main(string[] args)
        {
            FleckLog.Level = LogLevel.Debug;
            var allSockets = new List<IWebSocketConnection>();
            var server = new WebSocketServer("ws://127.0.0.1:50000");
            server.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    Console.WriteLine("Open!");
                    allSockets.Add(socket);
                };
                socket.OnClose = () =>
                {
                    Console.WriteLine("Close!");
                    allSockets.Remove(socket);
                };
                socket.OnMessage = message =>
                {
                    Console.WriteLine(message);
                    allSockets.ToList().ForEach(s => s.Send("Echo: " + message));
                };
            });


            var input = Console.ReadLine();
            while (input != "exit")
            {
                foreach (var socket in allSockets.ToList())
                {
                    socket.Send(input);
                }
                input = Console.ReadLine();
            }

        }
    }
}

client端：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>websocket client</title>
    <script type="text/javascript">
        var start = function () {
            var inc = document.getElementById('incomming');
            var wsImpl = window.WebSocket || window.MozWebSocket;
            var form = document.getElementById('sendForm');
            var input = document.getElementById('sendText');

            inc.innerHTML += "connecting to server ..<br/>";

            // create a new websocket and connect
            window.ws = new wsImpl('ws://127.0.0.1:50000/');

            // when data is comming from the server, this metod is called
            ws.onmessage = function (evt) {
                inc.innerHTML += evt.data + '<br/>';
                sendServerWesocketData(evt.data);
            };

            // when the connection is established, this method is called
            ws.onopen = function () {
                inc.innerHTML += '.. connection open<br/>';
            };

            // when the connection is closed, this method is called
            ws.onclose = function () {
                inc.innerHTML += '.. connection closed<br/>';
            }

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var val = input.value;
                ws.send(val);
                input.value = "";
            });

        }

       function sendServerWesocketData(dataInfo){
            bound.myMethod("jsData",dataInfo)
        }

        window.onload = start;
    </script>
</head>
<body>
    <form id="sendForm">
        <input id="sendText" placeholder="Text to send" />
    </form>
    <pre id="incomming"></pre>
</body>
</html>

二、cefsharp 的操作js （非常重要的地方）

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;

namespace Browserform
{
    //博主
    public partial class JSGETWS : Form
    {
        public JSGETWS()
        {
            InitializeComponent();
        }

        static ChromiumWebBrowser web;
        private void JSGETWS_Load(object sender, EventArgs e)
        {
            var re = new request();

            //接收和发送的http消息
            re.msg += Re_msg;
            re.msg2 += Re_msg2;       
            web = new ChromiumWebBrowser("http://127.0.0.1:8888/myproject/");
            web.Dock = DockStyle.Fill;
            web.RequestHandler = re;
            web.FrameLoadStart += Web_FrameLoadStart;
            web.FrameLoadEnd += Web_FrameLoadEnd;
            web.LoadingStateChanged += Web_LoadingStateChanged;

            this.Invoke(new Action(() =>
            {
                this.Controls.Add(web);
            }));

            //browser表示你的CefSharp对象使用它的RegisterJsObject来绑定你的.net类  
            web.RegisterJsObject("bound", new BoundObject());
 
                //在实际的JS代码中，你将使用这样的对象：
                //bound.myProperty; // 使用此语法访问属性 
 
                //bound.myMethod(); // 使用此调用方法
        }

        private void Web_LoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
        {
           
        }

        private void Web_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)
        {
           
        }

        private void Web_FrameLoadStart(object sender, FrameLoadStartEventArgs e)
        {
            
        }

        private void Re_msg2(string arg1, object arg2)
        {
            Console.WriteLine("arg1:" + arg1);
            Console.WriteLine("arg2:" + arg2);
        }

        private void Re_msg(string obj)
        {
            Console.WriteLine("obj:" + obj);
        }
    
    public class BoundObject
    {
        public string MyProperty { get; set; }
        public void MyMethod(string ShowNickName, string html)
        {
            try
            {

                Console.WriteLine("我来响应前台的的事件");
                Console.WriteLine(ShowNickName);
                Console.WriteLine(html);
            }
            catch (Exception ex)
            {

            }
        }
    }
}