使用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.小结
从上面的案例可以看到,websocket采取的方式是让客户端连接服务器,只要两端进行连接之后,就可以避免多次请求直接发送端对端的数据,不需要经过第三方的转发,只需要客户端和浏览器通过http协议进行一个握手的动作,然后单独建立一条TCP的通信通道进行数据的传送。
文章案例由于前端页面代码太多,就没有全部贴到文章里,有需要的可以在下面留言