使用webSocket实现对数据的实时推送
使用webSocket实现对数据的实时推送详解
1.什么是webSocket?
相对于 HTTP 这种非持久的协议来说,websocket是 HTML5 出的一个持久化的协议。
2.实时推送数据的实现方式以及应用场景
实现方式 1.轮询:客户端通过代码定时向服务器发送AJAX请求,服务器接收请求并返回响应信息。 优点:代码相对简单,适用于小型应用。 缺点:在服务器数据没有更新时,会造成请求重复数据,请求无用,浪费带宽和服务器资源。
2.长连接:在页面中嵌入一个隐藏的iframe,将这个隐藏的iframe的属性设置为一个长连接的请求或者xrh请求,服务器通过这种方式往客户端输入数据。 优点:数据实时刷新,请求不会浪费,管理较简洁。 缺点:长时间维护保持一个长连接会增加服务器开销。
3.webSocket:websocket是HTML5开始提供的一种客户端与服务器之间进行通讯的网络技术,通过这种方式可以实现客户端和服务器的长连接,双向实时通讯。 优点:减少资源消耗;实时推送不用等待客户端的请求;减少通信量; 缺点:少部分浏览器不支持,不同浏览器支持的程度和方式都不同 应用场景:聊天室、智慧大屏、消息提醒、股票k线图监控等。
3.代码详解
(1)使用Visual Studio开发工具创建控制台项目,(这里只做数据实时推送演示效果,中间的实际业务代码可根据需求场景来开发) (2)使用NuGet包管理器搜索Fleck包,并安装到我们上一步所创建的项目。 (3)在Main方法下面贴上如下代码,有注释
Console.WriteLine("(1)输入1更新图表数据;"); Console.WriteLine("(2)输入exit退出系统"); //先使用Nuget导入Fleck包 版本要求.net Framework 4.5及以上 FleckLog.Level = LogLevel.Debug; var allSockets = new List<IWebSocketConnection>(); //监听所有的的地址 var server = new WebSocketServer("ws://0.0.0.0:30000"); server.Start(socket => { // onopen:当WebSocket建立网络连接的时候触发该事件 socket.OnOpen = () => { Console.WriteLine("连接已打开!"); allSockets.Add(socket); }; // onclose:当WebSocket被关闭的时候触发该事件 socket.OnClose = () => { Console.WriteLine("连接已关闭!"); allSockets.Remove(socket); }; // onmessage:当WebSocket接受到远程服务器的数据的时候触发该事件 socket.OnMessage = message => { Console.WriteLine(message); allSockets.ToList().ForEach(s => s.Send("路人甲: " + message)); }; }); var input = Console.ReadLine(); while (input != "exit") { foreach (var socket in allSockets.ToList()) { //send():向远程服务器发送数据 //socket.Send("路人乙:"+input); if (input == "1") { string jsonData = @"{""teamData"":[25,33,15,0,5,10,20],""salesData"":[35,25,18,0,32,22,13]}"; socket.Send(jsonData); Console.WriteLine("发送成功"); } } input = Console.ReadLine(); }
(4)构建前端页面,在前端JS配置代码如下,可以在ws.onmessage事件中获取服务器实时推送的数据,可根据业务场景设计页面样式,我这里模拟的是一个智慧大屏的实时推送。
<script type="text/javascript"> var start = function () { var wsImpl = window.WebSocket || window.MozWebSocket; window.ws = new wsImpl(ws://localhost:30000/); //接收到消息的回调方法 ws.onmessage = function (evt) { //evt.data为后台推送数据 console.log(evt.data); }; //连接成功建立的回调方法 ws.onopen = function () { //连接已打开 }; //连接关闭的回调方法 ws.onclose = function () { //连接已关闭 } } window.onload = start; </script>
4.小结
文章案例由于前端页面代码太多,就没有全部贴到文章里,有需要的可以在下面留言
上一篇:
Java架构师技术进阶路线图
下一篇:
Win10只有飞行模式,没有WLAN图标