C# websocket及时通信协议的实现方法示例

传统“长轮询”实现Web端即时通讯的问题

WebSocket出现之前,Web端为了实现即时通讯,所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。

而比较新的技术去做轮询的效果是Comet , 但这种技术虽然可达到全双工通信,依然需要发出请求。

WebSocket 技术概览

在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,改变了原有的B/S模式。

WebSocket技术应用的典型架构:

WebSocket的技术原理:

介绍了基础知识,下面开始本文的正文内容:

C# websocket及时通信协议的实现

1:Websocket有java、nodejs、python、PHP、等版本 ,我现在使用的是C3版本,服务器端是Fleck。客户端和服务器端来使用websocket的,下面开始讲解如何使用:

2:在开始之前我们先来看看哪些浏览器支持websocket:

Websocket服务器支持:

3:接下来我们使用的是C#控制台程序来实现客户端直接通信的实施推送第一步服务器端:

打开VS2015 创建项目Webshoufa(如下图)

服务器端示例展示:

打开主程序入库Program.CS

写入主要链接推送代码如下展示

FleckLog.Level = LogLevel.Debug;

 var allSockets = new List<IWebSocketConnection>();

 var server = new WebSocketServer("ws://0.0.0.0:7181");

 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));

 };

 });

以上代码:尤为重要的注意【Fleck】我们此次实例中服务端使用的是Fleck如下解释:

Fleck是C#中的一个WebSocket服务器实现。从Nugget项目分支出来,Fleck不需要继承,容器或其他引用。代码示例如下(以下是一个将回显给客户端的例子。),在实现之前.NET平台必须是在4.5之上才能运行,

上面开始已经提到。例子中定义引用WebSocketServer服务写入端口路劲,格式方法是固定的。参照写入即可。

实例代码1如下

var server = new WebSocketServer("ws://localhost:7181");
server.Start(socket =>
 {
 socket.OnOpen = () => Console.WriteLine("Open!");
 socket.OnClose = () => Console.WriteLine("Close!");
 socket.OnMessage = message => socket.Send(message);
 });

实例代码2如下(安全秘钥版)

ar server = new WebSocketServer(“ wss://0.0.0.0:8431 ”);
server.Certificate = new X509Certificate2(“ MyCert.pfx ”);
server.Start(socket =>
{
 // ...用法正常
});

开始触发server.Start业务输出代码,以上两部分实例代码输出一样的区别在于启用安全连接需要两件事情:使用该方案wss代替ws,并将Fleck指向包含公钥和私钥的x509证书。

细可以参考官网API:https://github.com/statianzo/Fleck (本地下载)

接下来写入触发键盘响应代码:如下所示

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

代码解析:上述定义input =Console.ReadLine();由第一段输出参数

在input不为空的情况下给予下一次事件发生。

在此完成服务器端示例开发。

客户端页面请求端展示(浏览器端)

1:新建客户端项目,以web页面或者webform页面均可。

2:我的示例是以webform来创建如下图展示:

在此,我们只实现数据实时交互展示,如需要数据存储业务,需要在进行后台编码。

3:前段代码展示:

JS详解部分

<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/>";

 // 创建新的websocket新连接端口为7181
 window.ws = new wsImpl('ws://localhost:7181/');

 // 当数据从服务器服务中心发送后,继续向下运行过程
 ws.onmessage = function (evt) {
 inc.innerHTML += evt.data + '<br/>';
 };

 // 当链接对象找到服务端成功对接后,提示正常打开
 ws.onopen = function () {
 inc.innerHTML += '.. connection open<br/>';
 };

 // 当链接对象未找找到服务端成功对接后,提示打开失败,别切单项关闭
 ws.onclose = function () {
 inc.innerHTML += '.. connection closed<br/>';
 }

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

 }
 window.onload = start;
</script>

注意:以上示例代码片段中window.ws = new wsImpl('ws://localhost:7181/');中ws关键定义。

启用安全连接需要两件事情:使用该方案wss代替ws,并将Fleck指向包含公钥和私钥的x509证书。

并使用window.onload = start;函数。

注意:

一.将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。

二.通过window.onload来执行脚本代码。

有需要了解window.onload在JS中函数中的用法详细可参考:

http://www.jb51.net/article/72172.htm

第二段代码:调用控件实体进行事件触发:

<body>

 <form id="sendForm">

 <input id="sendText" placeholder="Text to send" />

 </form>

 <pre id="incomming"></pre>

</body>

以上是客户端web页面访问进行实施数据推送的页面开发完成。

好了,到了这里将两个项目生成无误之后逐个启动不分顺序,注意需要都启动方可进行测试验证:如下图效果。

启动客户端页面和控制台程序(然后刷新下客户端页面即可)

在客户端和服务器端交互时输入:你好,高峰或者XXXX信息,几乎在零误差时间内服务器端收到数据。然后也可在服务器端窗口输入信息,例如:你是不是要去阿拉善出差?

成功了,呵呵,是不是很神奇,现在可以添加自己喜欢的接口业务逻辑在里面了,是不是觉得前后台通信变得简单了?强不强大?爽不爽!!!!

Ok,到此我们就结束了这里的教程,此次重点讲述了以下两点开发组套,大家在开发过程中尤为重视:

1:.NET 4.5 添加了WebSocket

2:服务端:

var listener = new HttpListener();
listener.Prefixes.Add("http://*:8080/");
listener.Start();
var context = await listener.GetContextAsync();
var wsContext = await context.AcceptWebSocketAsync(null);
var ws = wsContext.WebSocket;

3:客户端:

var ws = new ClientWebSocket();
await ws.ConnectAsync(new Uri("ws://127.0.0.1:8080"),CancellationToken.None);

Ok,感谢大家看完小示例,有不足之处还请大家多多指教,共同探讨,以下将实例代码程序上传进来供大家参考,完善。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

    看到这篇文章的题目,估计很多人都会问,这个组件是不是有些显的无聊了,说到web通信,很多人都会想到ASP.NET SignalR,或者Nodejs等等,实现web的网络实时通讯.有关于web实时通信的相关概念问题,在这里就不再做具体的介绍了,有兴趣的可以自行百度. 下面我们介绍一款WebSocket组件websocket-sharp的相关内容. 一.websocket-sharp组件概述 websocket-sharp是一个C#实现websocket协议客户端和服务端,websocket-sha

  • C# websocket及时通信协议的实现方法示例

    传统"长轮询"实现Web端即时通讯的问题 WebSocket出现之前,Web端为了实现即时通讯,所用的技术都是Ajax轮询(polling).轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器.这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽. 而比较

  • 基于django channel实现websocket的聊天室的方法示例

    websocket 网易聊天室? ​ web微信? ​ 直播? 假如你工作以后,你的老板让你来开发一个内部的微信程序,你需要怎么办?我们先来分析一下里面的技术难点 消息的实时性? 实现群聊 现在有这样一个需求,老板给到你了,关乎你是否能转正?你要怎么做? 我们先说消息的实时性,按照我们目前的想法是我需要用http协议来做,那么http协议怎么来做那? 是不是要一直去访问我们的服务器,问服务器有没有人给我发消息,有没有人给我发消息?那么大家认为我多长时间去访问一次服务比较合适那? 1分钟1次?1分

  • SpringBoot如何添加WebSocket的方法示例

    一.WebSocket介绍 网站上的即时通讯是很常见的,比如网页的QQ,聊天系统等.按照以往的技术能力通常是采用轮询.Comet技术解决. HTTP协议是非持久化的,单向的网络协议,在建立连接后只允许浏览器向服务器发出请求后,服务器才能返回相应的数据.当需要即时通讯时,通过轮询在特定的时间间隔(如1秒),由浏览器向服务器发送Request请求,然后将最新的数据返回给浏览器.这样的方法最明显的缺点就是需要不断的发送请求,而且通常HTTP request的Header是非常长的,为了传输一个很小的数

  • 在koa中简单使用Websocket连接的方法示例

    目录 前言 ws模块安装 websocket初始化 websocket下发数据 总结 前言 在一次项目需求会上,有个新需求是要让用户从管理后台主动下发数据到app前端,从而让前端那边对这主动下发的数据做一些用户交互.实现思路很清晰,用Websocket的方式.Websocket 是一种自然的全双工.双向.单套接字连接,是建立在 TCP 协议上的. 相比于 HTTP 协议,Websocket 链接一旦建立,即可进行双向的实时通信: ws模块安装 由于后台是基于node+koa2+mongo进行开发

  • flask上使用websocket的方法示例

    目录 Flask-SocketIO服务器端程序 SocketIO客户端程序 使用Flask-Sockets Flask-Sockets和Flask-SocketIO之间的主要区别在于前者仅仅将WebSocket协议(通过使用gevent-websocket项目)进行包装,因此它只适用于原生支持WebSocket协议的浏览器,对于那些不支持WebSocket协议的较老的浏览器,就无法使用它了. Flask-SocketIO则不同,通过前面的介绍,读者应该已经知道了它不仅实现了WebSocket协议

  • vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • SpringBoot+WebSocket实现即时通讯的方法详解

    目录 环境信息 服务端实现 导入依赖 创建配置类 创建一个注解式的端点并在其中通过配套注解声明回调方法 服务端主动发送消息给客户端 客户端实现 Java客户端实现 在前端环境(vue)中使用websocket 环境信息 名称 版本号 Spring Boot 2.4.5 Idea 2021.3.2 服务端实现 导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp

  • oracle中decode函数的使用方法示例

    decode的几种用法 1:使用decode判断字符串是否一样 DECODE(value,if1,then1,if2,then2,if3,then3,...,else) 含义为 IF 条件=值1 THEN RETURN(value 1) ELSIF 条件=值2 THEN RETURN(value 2) ...... ELSIF 条件=值n THEN RETURN(value 3) ELSE RETURN(default) END IF sql测试 select empno,decode(empn

  • Oracle数据行拆分多行方法示例

    工作和学习中常常会遇到一行要分割成多行数据的情况,在此整理一下做下对比. 单行拆分 如果表数据只有一行,则可以直接在原表上直接使用connect by+正则的方法,比如: select regexp_substr('444.555.666', '[^.]+', 1, level) col from dual connect by level <= regexp_count('444.555.666', '\.') + 1 输出结果: COL ---- 444 555 666 多行拆分 如果数据表

  • swift 3.0中实现字符串截取、比较的方法示例

    前言 字符串处理一直都是程序开发中不可避免的,而字符串截取/替换操作更是频繁.swift3.0 中不能直接使用下标数字进行字符串解决,只能使用String.Index来做位置索引,要想实现截取功能首先得获取到String.Index; 下面话不多说了,来一起看看详细的介绍吧. 实例代码 下面两段代码获取开头可结尾,获取中间部分参数用Range<Index>即可: 获取结尾两个字符子串: let sessionId = "this is a test" let index =

随机推荐