C# 实现websocket 发送客户端网页前端数据,C#和网页前端通信

今天的文章来说明如何在C#里构建我们自己的websocket服务器,已经客户端,以及如何发送数据给客户端,如何实现订阅的操作,如何实现应答模式的操作。ok,废话不多说,直接进入正题:

本库的demo源代码地址:https://github.com/dathlin/HslCommunication

如果想要联系作者,请访问官网:  http://www.hslcommunication.cn/

联系作者及加群方式:http://www.hslcommunication.cn/Cooperation

在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控制台输入下面的指令安装:


1

Install-Package HslCommunication

  

如果需要教程:Nuget安装教程:http://www.cnblogs.com/dathlin/p/7705014.html

using HslCommunication.WebSocket;
using HslCommunication;

  

测试的websocket服务端界面如下:

我们的客户端如下的信息:

好了,我们来学习如何开发websocket的服务器,其实很简单,实例化,启动服务器就可以了。就好比下面的代码,绑定了一个事件的回调地址,我们把数据显示出来即可

        private WebSocketServer wsServer;

        private void button1_Click( object sender, EventArgs e )
        {
            try
            {
                wsServer = new WebSocketServer( );
                wsServer.OnClientApplicationMessageReceive += WebSocket_OnClientApplicationMessageReceive;
                wsServer.ServerStart( 1883 );
                MessageBox.Show( "Start Success" );
            }
            catch (Exception ex)
            {
                MessageBox.Show( "Start Failed : " + ex.Message );
            }
        }
        private void WebSocket_OnClientApplicationMessageReceive( WebSocketSession session, WebSocketMessage message )
        {
            Invoke( new Action( ( ) =>
            {
                if(!isStop)
                    textBox8.AppendText( $"OpCode:[{message.OpCode}] Mask:[{message.HasMask}] Payload:[{Encoding.UTF8.GetString( message.Payload )}]" + Environment.NewLine );
            } ) );
            }
        }

我们新增一个按钮,用来发送数据到客户端的

wsServer.PublishAllClientPayload( "测试的数据信息" );

好了,我们目前可以测试了

客户端收到了数据内容,我们现在来看看,是否推送给了网页端,为此我们需要编写一个简单的网页。新建一个html文件,打开记事本,写入下面的代码

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>hsl websocket测试</title>
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               // 打开一个 web socket
               var ws = new WebSocket("ws://127.0.0.1:1883");
               ws.onopen = function()
               {
                  console.log("已经打开...");
               };
               ws.onmessage = function (evt)
               {
                  var received_msg = evt.data;
                  console.log(received_msg);
               };
            }

            else
            {
				console.log("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
   </head>
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>

   </body>
</html>

  

然后我们运行起来,我这使用了谷歌的浏览器运行了这个网页的信息。

当然了,客户端和网页也可以直接发送数据给C#的服务器后台。我们现在看看web端的数据是如何发送的

ws.send("发送数据");

  我们看到发送数据非常的简单。

我们已经看过了web端的数据通信方式,我们再来看看C#端的客户端是如何操作的

		private WebSocketClient wsClient;

		private void button1_Click( object sender, EventArgs e )
		{
			wsClient = new WebSocketClient( "127.0.0.1", 1883 );              wsClient.OnClientApplicationMessageReceive += WebSocket_OnWebSocketMessageReceived;
			OperateResult connect = wsClient.ConnectServer( );

			if (connect.IsSuccess)
			{
				MessageBox.Show( StringResources.Language.ConnectServerSuccess );
			}
			else
			{
				MessageBox.Show( connect.Message );
			}
		}

		private void WebSocket_OnWebSocketMessageReceived( WebSocketMessage message )
		{
			try
			{
				Invoke( new Action( ( ) =>
				{
					string msg = Encoding.UTF8.GetString( message.Payload );

						textBox8.AppendText( msg + Environment.NewLine );
				} ) );
			}
			catch
			{

			}
		}

客户端发送数据也是很简单的。

		private void button3_Click( object sender, EventArgs e )
		{
			OperateResult send = wsClient.SendServer(  textBox4.Text );

			if (!send.IsSuccess) MessageBox.Show( "Send Failed:" + send.Message );
		}

  

讲完了上述,再来讲讲订阅。从websocket协议来看,其实没有订阅的功能,这个都是二次开发实现的。在hsl的服务器中,允许客户端请求的时候携带header,来表示当前的订阅信息。

比如我想订阅A,那么header就要增加

HslSubscribes: A

  

服务器端就可以使用下面的方法来发布订阅操作了

wsServer.PublishClientPayload( "A", "1234" );

  

就会只给当前订阅的客户端发送数据。当然这种方式比较不好,无法动态调整订阅的信息,而且对于web端原生的websocket,也不太好集成、那我们可以使用二次开发的方式实现。比如服务器端,根据客户端发来的数据进行动态添加订阅。

		private void WebSocket_OnClientApplicationMessageReceive( WebSocketSession session, WebSocketMessage message )
		{
			Invoke( new Action( ( ) =>
			{
				if(!isStop)
					textBox8.AppendText( $"OpCode:[{message.OpCode}] Mask:[{message.HasMask}] Payload:[{Encoding.UTF8.GetString( message.Payload )}]" + Environment.NewLine );
			} ) );

			// 假设发来的数据是订阅的主题。那我们可以动态添加
			session.AddTopic( Encoding.UTF8.GetString( message.Payload ) );

		}

  

当然也可以动态移除,需要对payload数据进行约定了。好了,最后介绍下,同步访问机制。hsl的websocket支持同步访问机制,客户端在标记自己的请求为同步访问后。服务器端发布数据的时候自动过滤所有的同步客户端。同步客户端的意思是,客户端发送数据给客户端,并等待服务器的返回。

		private void WebSocket_OnClientApplicationMessageReceive( WebSocketSession session, WebSocketMessage message )
		{
			Invoke( new Action( ( ) =>
			{
				if(!isStop)
					textBox8.AppendText( $"OpCode:[{message.OpCode}] Mask:[{message.HasMask}] Payload:[{Encoding.UTF8.GetString( message.Payload )}]" + Environment.NewLine );
			} ) );

			// 应答客户端连接的情况下是需要进行返回数据的,此处演示返回的是原始的数据,追加一个随机数,你可以自己根据业务来决定返回什么数据
			if (session.IsQASession)
			{
				wsServer.SendClientPayload( session, Encoding.UTF8.GetString( message.Payload ) + random.Next( 1000, 10000 ) );
			}
		}

  

此处的示例就是

		private void WebSocket_OnClientApplicationMessageReceive( WebSocketSession session, WebSocketMessage message )
		{
			Invoke( new Action( ( ) =>
			{
				if(!isStop)
					textBox8.AppendText( $"OpCode:[{message.OpCode}] Mask:[{message.HasMask}] Payload:[{Encoding.UTF8.GetString( message.Payload )}]" + Environment.NewLine );
			} ) );

			// 应答客户端连接的情况下是需要进行返回数据的,此处演示返回的是原始的数据,追加一个随机数,你可以自己根据业务来决定返回什么数据
			if (session.IsQASession)
			{
				wsServer.SendClientPayload( session, Encoding.UTF8.GetString( message.Payload ) + random.Next( 1000, 10000 ) );
			}
		}

当然了,你也可以直接认定所有的客户端,都是同步网络。这样的话,就不需要判断了、

		private void WebSocket_OnClientApplicationMessageReceive( WebSocketSession session, WebSocketMessage message )
		{
			Invoke( new Action( ( ) =>
			{
				if(!isStop)
					textBox8.AppendText( $"OpCode:[{message.OpCode}] Mask:[{message.HasMask}] Payload:[{Encoding.UTF8.GetString( message.Payload )}]" + Environment.NewLine );
			} ) );

			// 应答客户端连接的情况下是需要进行返回数据的,此处演示返回的是原始的数据,追加一个随机数,你可以自己根据业务来决定返回什么数据
			//if (session.IsQASession)
			//{
				wsServer.SendClientPayload( session, Encoding.UTF8.GetString( message.Payload ) + random.Next( 1000, 10000 ) );
			//}
		}

  

实际看业务需求了。

我们来看看同步的客户端操作

		private WebSocketQANet wsClient;

		private void button1_Click( object sender, EventArgs e )
		{
			wsClient = new WebSocketQANet( "127.0.0.1", 1883 );
			OperateResult connect = wsClient.ConnectServer( );
			if (connect.IsSuccess)
			{
				MessageBox.Show( StringResources.Language.ConnectServerSuccess );
			}
			else
			{
				MessageBox.Show( StringResources.Language.ConnectedFailed + connect.ToMessageShowString( ) );
			}
		}

  

然后就可以直接访问了

			OperateResult<string> read = wsClient.ReadFromServer(  "123" );

			if (read.IsSuccess)
			{
				string msg = read.Content;
                        }
                        else
                        {
                            // 失败
                        }

  

好了,更多的详细内容可以参考demo源代码哦。感谢支持

原文地址:https://www.cnblogs.com/dathlin/p/12303098.html

时间: 2024-10-12 22:33:50

C# 实现websocket 发送客户端网页前端数据,C#和网页前端通信的相关文章

Vue+WebSocket实现客户端与服务端通讯,前端与机器人对接

因公司突然要求做个机器人客户端,需要与机器人对接,采用了WebSocket技术实现浏览器与服务端进行联调, 前端以WebSocket协议格式发送数据到后台, 后台解析指令并将指令发送到机器人, 机器人的相关相应信息也通过后台使用WebSocket协议封装数据传输给浏览器 1 created() { 2 this.initWebSocket() 3 }, 4 methods: { 5 // 初始化weosocket 6 initWebSocket() { 7 // ws地址 8 const wsu

ASIFormDataRequest/ASIHTTPRequest 向服务器发送数据/上传图片 返回网页错误数据

例如返回: 尽管它走的是成功返回的方法,可是依然返回了错误的网页数据,引起此情况有以下可能:1.上传多个参数时,缺少参数: 2.参数的格式不正确:(LZ的错误就是参数是二次使用,没注意参数已经修改过格式了) 3.向发送服务器发送的key值一定要确认正确: ASIFormDataRequest/ASIHTTPRequest 向服务器发送数据/上传图片 返回网页错误数据

TCP Incast 问题TCP INCAST解决思路 应用场景:在集群文件系统内,客户端应用请求某个逻辑数据块(通常情况下一个读数据块大小是1MB),该数据块以条带化方式分别存储在几个存储服务器上,即采用更小的数据片存储(32KB,256KB等),这种小数据片称为服务器请求单元(SRU)。只有当客户端接收到所有的服务器返回的其所请求数据块的SRU后才继续发送出下一个数据块请求,即客户端同时向

TCP INCAST解决思路 应用场景:在集群文件系统内,客户端应用请求某个逻辑数据块(通常情况下一个读数据块大小是1MB),该数据块以条带化方式分别存储在几个存储服务器上,即采用更小的数据片存储(32KB,256KB等),这种小数据片称为服务器请求单元(SRU).只有当客户端接收到所有的服务器返回的其所请求数据块的SRU后才继续发送出下一个数据块请求,即客户端同时向多个存储服务器发起并发TCP请求,且所有服务器同时向客户端发送SRU. 出现的问题: 1)         这种多对一的服务器向客

[转载]前端数据之美 -- 七天打造前端性能监控系统

开始行动 本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界. Day 1 为什么要监控性能? “If you cannot measure it, you cannot improve it” ———— William Thomson 这是一个最基本的问题,为什么要关注和监控前端性能?对于公司来说,性能在一定程度上与利益直接相关.国外有很多这方面的调研数据: 性能 收益 Google 延迟 400ms 搜索量下降 0.59% Bin

如何发送HTML表单数据

多数时候,HTML表单的目的只是为了把数据发给服务器,之后服务器再处理这些数据并发送响应给用户.虽然看起来挺简单的,但我们还是得注意一些事情以确保传送的数据不会破坏服务器.或者给你的用户制造麻烦. 数据会到哪里去 关于客户端/服务器架构 整个web都是基于一种基本的客户端/服务器架构,该架构可以归纳如下: 一个客户端(通常是Web浏览器)使用HTTP协议发送一个请求给服务器(通常是web服务器程序,譬如Apache, Nginx, IIS, Tomcat等等),而服务器则以相同的协议响应这个请求

WebSocket安卓客户端实现详解(一)–连接建立与重连

http://blog.csdn.net/zly921112/article/details/72973054 前言 这里特别说明下因为WebSocket服务端是公司线上项目所以这里url和具体协议我全部抹去了,但我会尽力给大家讲明白并且demo我都是测试过,还望各位看官见谅 我们先粗犷的讲下流程,掌握个大概的方向,然后在深入讲解细节的实现.这里先解答一个疑惑,为啥我们这要用WebSocket而不是Socket呢,因为WebSocket是一个应用层协议很多东西都规定好了我们直接按他的规定来用就好

前端数据可视化

原文 在大数据时代,很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,开发人员很多时候需要使用图表来表现一些数据.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我把前端数据可视化分为了五种:1.图表2.图谱3.地图4.关系图5.立体图我将按照顺序介绍62款前端可视化插件,下面就分享下34款图表插件:1.amchartsurl:

前端数据可视化插件(一)图表

摘要: 在大数据时代,很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,开发人员很多时候需要使用图表来表现一些数据.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我把前端数据可视化分为了五种: 图表 图谱 地图 关系图 立体图 我将按照顺序介绍64款前端可视化插件,下面就分享下34款图表插件 amchartsurl: http

asp网络编程:Web程序中网页间数据传递方法小结

我们总是会遇到这样的情况,需要将数值从一个网页传递到另一个网页.在这篇文章中,向你展示了几种从一个网页向另一个网页传递数值的几种方法.在此例子中,创建的网页由一个文本控件和几个按钮控件组成.在文本框中输入的数据通过被标识在按钮控件中的不同方法从一个网页传递到另一个网页. Response.Redirect 让我们首先看一看如何使用Response.Redirect方法传递数据.这是它们之中最简单的方法.在文本框中输入一些数据,并且当你输入完成数据后,按下“Respose.Redirect”按钮.