websocket 传输实时数据到前端，并用 Echart 动态展示数据

 

后端代码我用的是C# 和 Fleck nuget，还是比较容易建立websocket 服务的。

首先我们建立一个websocket server class，设置两个属性，一个是服务器的websocket对象，另一个是客户端连到此服务上的socket链接数组。

public class Server
    {
        private WebSocketServer SocketServer { get; set; }
        private List<IWebSocketConnection> ClientSocket { get; set; } = new List<IWebSocketConnection>();
        
        }

接下来我们要写服务端的初始化代码，主要是是初始化websocketServer 对象，让它开始监听，已经当socket开始，关闭时的业务逻辑，我们此时只要在开始，和关闭时打印在console里即可。

public void Start(int port)
        {
            SocketServer = new WebSocketServer("ws://127.0.0.1:" + port);

            SocketServer.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    Console.WriteLine("Open!");
                    ClientSocket.Add(socket);
                };
                socket.OnClose = () =>
                {
                    ClientSocket.Remove(socket);
                    Console.WriteLine("Close!");
                };
                
            });

这一步是重头戏，添加收到客户端发来的消息，并处理消息的逻辑代码。我是想当客户端索要数据时，我会不停的给它发送实时数据，直到客户端喊停为止。所以还是先写创建实时数据的代码吧，因为想在echart里展示，我就做两个list，分别代表x轴和y轴，并把它序列化成string。

         数据结构很简单：

        

public class Data
    {
        public List<int> x { get; set; }
        public List<int> y { get; set; }
    }

        做序列化的代码：

p