WebSocket 使用总结

服务端实现
IWebScoket 接口定义:
    public interface IWebSocketConnection
    {
        Action OnOpen { get; set; }   //打开
        Action OnClose { get; set; }  //关闭
        Action<string> OnMessage { get; set; }  //消息处理
        Action<byte[]> OnBinary { get; set; }  //二进制消息
        Action<byte[]> OnPing { get; set; }    //ping 心跳检测
        Action<byte[]> OnPong { get; set; }  //和ping一样
        Action<Exception> OnError { get; set; } //错误处理
        IWebSocketConnectionInfo ConnectionInfo { get; } //Websocket 连接信息
        bool IsAvailable { get; }  //是否可用

        void Close();  //关闭
        void Close(int code); 
        Task Send(string message);  //发送消息
        Task Send(byte[] message);
        Task SendPing(byte[] message);  //回复心跳检测
        Task SendPong(byte[] message);
    }
通过接口的定义可以看出这个接口并不复杂,主要方法有 Open,Close,Send和Ping 委托类型,用于接收回调方法,而下面的Task Send() 任务,则说明接口支持异步处理事件。我们再来看看其实现类:

    public class WebSocketServer : IWebSocketServer, IDisposable
    {
        public WebSocketServer(string location, bool supportDualStack = true);

        public ISocket ListenerSocket { get; set; }
        public string Location { get; }
        public bool SupportDualStack { get; }
        public int Port { get; }
        public X509Certificate2 Certificate { get; set; }
        public SslProtocols EnabledSslProtocols { get; set; }
        public IEnumerable<string> SupportedSubProtocols { get; set; }
        public bool RestartAfterListenError { get; set; }
        public bool IsSecure { get; }

        public void Dispose();
        public void Start(Action<IWebSocketConnection> config);  //这里把接口的实现作为参数放在Start方法中处理
    }

1.首先用 nuget 安装Fleck
install-package Fleck

using Fleck;   //引用Fleck命名控件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

namespace WindowsFormsApp2
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        //委托方法,用于显示接收到客户端发送的内容
        private void addMsg(string msg)   
        {
            this.Invoke((Action)delegate {
                this.listBox1.Items.Add(msg);
            });
        }
        private List<IWebSocketConnection> allSockets;   //声明 IWebSocketConnect 集合 allSockets
        private void button1_Click(object sender, EventArgs e)
        {
            button1.Enabled = false;
            button2.Enabled = true;
            FleckLog.Level = LogLevel.Debug;
            allSockets = new List<IWebSocketConnection>();
            var server = new WebSocketServer("ws://0.0.0.0:10020");
            server.Start(  //在这里给WebSocket 对象委托赋值(匿名方法)
                socket =>
                {
                    socket.OnOpen = () =>
                    {
                        addMsg("Open");
                        allSockets.Add(socket);
                    };
                    socket.OnClose = () =>
                    {
                        addMsg("Close!");
                        allSockets.Remove(socket);
                    };
                    socket.OnMessage = message =>
                    {
                        addMsg(message);
                        allSockets.ToList().ForEach(s => s.Send($"echo:{message}"));  //给socket对象列表中的连接对象发送消息
                    };
                }

                );
        }

        private void button2_Click(object sender, EventArgs e)
        {
            button1.Enabled = true;
            button2.Enabled = false;
            foreach (var socket in allSockets.ToList())
            {
                socket.Send("exit");
            }
        }
    }
}

客户度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>WebSocket Client</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<script src="js/jquery-1.9.1.min.js"></script>
	    <script type="text/javascript">
	      var socketUrl='ws://localhost:10020'; 
	   	  var socket;
	   	  function fsend()
	   	  {
	   	    socket =new WebSocket(socketUrl);
	   	  	socket.onopen=function(event){
	   	  		//想要验证是否连接成功,可以给后台发送一个消息
	   	  		socket.send('我已经请求连接了,如果我们收到这条服务端回复的消息,证明我已经成功连接!');	   	  		
	   	  	};
	   	  	socket.onmessage=function(str){
	   	  		$("#incomming").append(str);
	   	  	};
	   	  	socket.onclose=function(str)
	   	  	{
	   	  		$("#incomming").append(str);
	   	  	} 	  	
	   	  }
	   	  function sendmsg()
	   	  {
	   	  	if ($("#msgText").length<1){
	   	  		alert("不能发送空内容!");
	   	  	}else
	   	  	{
	   	  	socket.send($("#msgText").val());
	   	  	$("#msgText").text("");
	   	  	}
	   	  }
	   	  function f1() {
	   	  	$("#incomming").val("test");
	   	  	alert("test");	   	  	
	   	  }
	   </script>
	</head>
	<body>
		<form id="sendForm">
			<input id="sendText" placeholder="请输入发送内容" />
		</form>
		<div>
			<input id="msgText" placeholder="输入发送内容" /> <button onclick="fsend()">连接</button>
			<button onclick="sendmsg()">发送</button>
		</div>
		<textarea id="incomming"></textarea>
		<button ondblclick="f1()">测试</button>
	</body>
</html>

websocket 原理参考 https://blog.csdn.net/sinat_36422236/article/details/85051547
posted @   丹心石  阅读(246)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示