通过webSocket实现app运动数据在网页实时显示
来源:互联网 发布:女性自慰姿势图解知乎 编辑:程序博客网 时间:2024/04/28 03:27
一概述
## 在项目中有这样一个需要,app为智能心电跑步类app,在跑步时需要在网页端显示用户的跑步信息,包括跑步时长、心率、心电图等,其中心电图是需要实时更新的。当用户开始跑步时在网页上显示这些信息,跑步结束时结束实时数据显示,将最终跑步结果显示在网页时,效果图如下:在网页上的显示效果如下:
先做个大致的分析,数据要做到实时显示,需要将app产生的数据通过网络发送到服务器,然后网页从服务器获取数据,在网页上显示,如下图所示:
整个流程比较简单,但是实现起来却比较难。这里选择实现技术很重要,先按照一般思路,app像服务器发送数据,通过http协议不断的向服务器发送数据,网页端不断的通过http向服务器请求数据,这时候你会发现app要实时发送数据通过http很耗资源甚至是几乎做不到,app每个几秒要向服务器发送运动数据,还有心电图实时显示通过http是做不到的,网页也是一样,这时遇到瓶颈,这种需要应该很常用,向app上很常用的消息推送、在线下线通知,他们的实现方式也肯定不是发生http请求,这时这个全新的问题摆在自己面前,该如何解决?查资料,然后会发现一个专门针对这种场景的技术,叫websocket。下面我们先来了解websocket,然后讨论通过websocket来实现需求的大致思路,然后在app端、网页端、服务器分析实现具体的技术细节。
二、websocket原理
WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时,可以使服务器避免打开多个HTTP连接进行工作来节约资源,提高了工作效率和资源利用率。
注:下面这部分websocket结束有参考与博客https://segmentfault.com/a/1190000007614996
1. 什么是keep-alive
keep-alive只是客户端的一种建议
我们打开百度首页,进一步查看header。
如图,我们看到请求header中有一行:
Connection:keep-alive
keep-alive是通知服务器,在这个HTTP Request/Responset结束后,不要立即断开TCP连接(注意是TCP连接,和HTTP没有关系),后面的HTTP Request仍然可以通过这个TCP连接继续传送。
但是!这只是个建议,服务器可能不支持,也可能忽略掉这个建议。也可能因为时间太久而直接断开TCP连接
通俗点解释就是:keep-alive只是通知服务器,您先别挂,一会儿可能还有活儿,至于它挂不挂还是看它心情。
所以,keep-alive只是客户端建议的一种复用TCP连接的方式,至于服务器支持不支持,就由不得客户端了。
keep-alive只是http协议中的一部分
keep-alive是http协议中的一部分,也即客户端可以主动的发起request到服务器,服务器只能被动的response给客户端。
我要想实现服务器主动的push消息给客户端,keep-alive是无能无力的。
2. 服务器的消息如何发给客户端
long long ago~ 服务器端要想主动的push消息给客户端(比如网页聊天室消息的即时收发),这是不可能滴。
但是,我可以使用ajax轮询、long poll 技术造一个服务端给客户端主动push消息的假象。
①:什么是ajax轮询?
ajax轮询的原理非常简单,让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。
场景再现:
客户端:啦啦啦,有没有新信息(Request) 服务端:没有(Response) 客户端:啦啦啦,有没有新信息(Request)
服务端:没有。。(Response) 客户端:啦啦啦,有没有新信息(Request) 服务端:你好烦啊,没有啊。。(Response)
客户端:啦啦啦,有没有新消息(Request) 服务端:好啦好啦,有啦给你。(Response)
客户端:啦啦啦,有没有新消息(Request) 服务端:。。。。。没。。。。没。。。没有(Response) —- loop
但是这样,有没有发现,大大增加了服务端的负载,并且速度还慢。
②:什么是long poll?
long poll和ajax差不多,原理都是采用轮询的方式。只不过long poll是采取的阻塞的方式去轮询。
也即客户端发起一个请求连接,这个连接会阻塞住,直到服务端有了消息,才会response给客户端。
场景再现:
客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request) 服务端:额。。 等待到有消息的时候。。来
给你(Response) 客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request) -loop
long pull 虽然降低了服务器的负载,但是需要服务器有很高的并发能力才可以。
而目前处理高并发的模型基本都是异步非阻塞的模型(比如nginx)。
③:总结
ajax轮询、long poll技术虽然都能实现服务端消息的实时通知,但是各有缺点,都不是根本的解决办法。
计算机界急需一种新的技术去处理这些需求~
3. websocket来啦
既然ajax轮询、long poll都不怎么样。我们发明一种新的协议吧!
Websocket协议解决了服务器与客户端全双工通信的问题。
注:什么是单工、半双工、全工通信? 信息只能单向传送为单工; 信息能双向传送但不能同时双向传送称为半双工;
信息能够同时双向传送则称为全双工。
websocket协议解析
wensocket协议包含两部分:一部分是“握手”,一部分是“数据传输”。
为了便于演示,我们采用swoole建立一个websocket服务器来演示。
第一步、握手
①客户端向服务端发起连接请求
如图,我们在请求服务器的时候,发送了这样的request header。
下面我们就一些比较重要的字段信息进行说明:
Connection:Upgrade #通知服务器协议升级 Upgrade:websocket #协议升级为websocket协议
Host:0.0.0.0:9501 #升级协议的服务主机:端口地址
Sec-WebSocket-Key:K8o1cNIxO2pR6inTIDBSgg== #传输给服务器的key
Sec-WebSocket-Version:13 #websocket协议版本13
Sec-WebSocket-Key有什么用呢?
客户端将这个key发送给服务器,服务器将这个key进行处理,将处理后的key返回给客户端,客户端根据这个key是否正确来判断是否建立连接。
②:服务端返回握手应答
如图,我们看到websocket协议状态码是101.
101表示协议切换成功。
我们查看websocket的response header。如图:
下面解释下reponse header字段的含义
Connection:Upgrade #协议升级成功
Sec-WebSocket-Accept:GnoYH/ip/ZMh+a5rX5P/YR6e68g= #服务端处理之后的key
Sec-WebSocket-Version:13#websocket 协议版本号
Upgrade:websocket#协议升级为websocket
至此,websocket握手成功!下面就尽情的传输数据吧!
第二步、数据传输
连接建立成功之后,就可以进行数据传输了,不同的客户端有不同的实现方案,在Android、iOS、网页(通过js)都可以向服务器发送数据,当然服务器可以是java、PHP等,客户端和服务器端都有相应的解决方案。
三、实现方案概述
通过上面对websocket的了解,websocket是一种类似http新的协议,代替以前网络轮训或长连接代码的资源消耗,专门用来做一些实时性很强的数据传输,可以建立webSocket连接,然后数据通过建立的webSocket通道进行传输。大致流程如下:
如上图,app和服务器建立websocket连接后,会得到websocket对象,然后app端通过websocket对象向服务器发送数据。网页端建立websocket的过程和app端一致,得到websocket对象后,这个websocket通过会处于监听状态,一致监听服务器是否有数据到来。当图中app发送数据到服务器(标号为3,绿色线),服务器会通过和网页端建立的websocket对象向网页发送一条数据(标号为6,绿色线),然后网页端会收到服务器发送的数据。
注:上图通信过程中总共建立2个websocket连接,一个是app端和服务器端建立的连接,建立后app端会有一个websocket对象,服务器端有一个websocket对象。一个是网页端和服务器端建立的连接,建立后网页会有一个websocket对象,服务器端有一个websocket对象。所以,服务器端此时有2个websocket对象,达到app端的数据向网页端转发的功能。
三、实现细节(app、网页、服务器)
1. app
app端采用Android技术实现,Android端提供websocket通信相关的库,为JavaWebSocket_fat.jar,可以导入进来直接使用。
public class WebSocketUtil { private static final String TAG = "WebSocketUtil"; public WebSocketClient mWebSocketClient; public boolean isStartDataTransfer; public String mCurBrowserClientID; public String mCurAppClientID; //建立websocket连接 public void connectWebSocket(String address) { try { initSocketClient(address); } catch (URISyntaxException e) { e.printStackTrace(); } new Thread(){ @Override public void run() { mWebSocketClient.connect(); } }.start(); } public void initSocketClient(String address) throws URISyntaxException { if(mWebSocketClient == null) { //建立成功会得到一个websocket的客户端对象,以后发消息都是通过这个对象来发送 mWebSocketClient = new WebSocketClient(new URI(address)) { @Override public void onOpen(ServerHandshake serverHandshake) { //连接成功 Log.i(TAG,"opened connection"); } @Override public void onMessage(String s) { //收到服务端消息 Log.i(TAG,"received:" + s); } @Override public void onClose(int i, String s, boolean remote) { //连接断开,remote判定是客户端断开还是服务端断开 Log.i(TAG,"Connection closed by " + ( remote ? "remote peer" : "us" ) + ", info=" + s); } @Override public void onError(Exception e) { Log.e(TAG,"error:" + e); } }; } } //给服务器发送消息 public void sendSocketMsg(String msg) { Log.i(TAG,"sendSocketMsg"); if (mWebSocketClient!=null && mWebSocketClient.isOpen()){ mWebSocketClient.send(msg); //通过mWebSocketClient发送数据 Log.i(TAG,"msg:"+msg); } } //断开连接 public void closeConnectWebSocket() { try { if(mWebSocketClient!=null){ mWebSocketClient.close(); mWebSocketClient = null; } } catch(Exception e) { e.printStackTrace(); } finally { mWebSocketClient = null; isStartDataTransfer = false; } }
2. 网页
网页端端HTML5提供了websocket的实现方案,直接调用js的函数即可建立连接、发送数据等,会发现网页端和app的websocket建立连接过程极为相似。
<%@ page language="java" pageEncoding="UTF-8" %><!DOCTYPE html><html><head> <title>Java后端WebSocket的Tomcat实现</title></head><body> Welcome<br/><input id="text" type="text"/> <button onclick="send()">发送消息</button> <hr/> <button onclick="closeWebSocket()">关闭WebSocket连接</button> <hr/> <div id="message"></div></body><script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8080/websocket"); } else { alert('当前浏览器 Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function () { setMessageInnerHTML("WebSocket连接发生错误"); }; //连接成功建立的回调方法 websocket.onopen = function () { setMessageInnerHTML("WebSocket连接成功"); } //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function () { setMessageInnerHTML("WebSocket连接关闭"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var message = document.getElementById('text').value; websocket.send(message); }</script></html>
3. 服务器
服务器端使用Java来写后台,用tomcat做服务器,tomcat7.0以上都提供了websocket实现库,这个库是tomcat自带的,直接使用即可,无需导入,如图:
所以这个功能比较常用,tomcat都列为自带库名单了。
package me.gacl.websocket;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;import javax.websocket.*;import javax.websocket.server.ServerEndpoint;/** * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端, * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端 */@ServerEndpoint("/websocket")public class WebSocketTest { //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。 private static int onlineCount = 0; //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识 private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>(); //与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session; /** * 连接建立成功调用的方法 * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据 */ @OnOpen public void onOpen(Session session){ this.session = session; webSocketSet.add(this); //加入set中 addOnlineCount(); //在线数加1 System.out.println("有新连接加入!当前在线人数为" + getOnlineCount()); } /** * 连接关闭调用的方法 */ @OnClose public void onClose(){ webSocketSet.remove(this); //从set中删除 subOnlineCount(); //在线数减1 System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount()); } /** * 收到客户端消息后调用的方法 * @param message 客户端发送过来的消息 * @param session 可选的参数 */ @OnMessage public void onMessage(String message, Session session) { System.out.println("来自客户端的消息:" + message); //群发消息 for(WebSocketTest item: webSocketSet){ try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); continue; } } } /** * 发生错误时调用 * @param session * @param error */ @OnError public void onError(Session session, Throwable error){ System.out.println("发生错误"); error.printStackTrace(); } /** * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。 * @param message * @throws IOException */ public void sendMessage(String message) throws IOException{ this.session.getBasicRemote().sendText(message); //this.session.getAsyncRemote().sendText(message); } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketTest.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketTest.onlineCount--; }}
看完三个代码,会发现app、网页、服务器的websocket代码极为相似,知道原理后代码写起来很简单。
到此所以的都介绍完了,上面app端、网页端、服务器端项目都是公司实际项目,无法上传分享,只做了简单的demo代码,有问题的私信或者发邮箱1812507678@qq.com。
- 通过webSocket实现app运动数据在网页实时显示
- 实时数据在网页中的实现
- 网页实时聊天之PHP实现websocket
- 网页实时聊天之PHP实现websocket
- RabbitMQ订阅发布的消息,通过WebSocket实现数据实时推送到前端上显
- RabbitMQ订阅发布的消息,通过WebSocket实现数据实时推送到前端上显
- RabbitMQ订阅发布的消息,通过WebSocket实现数据实时推送到前端
- 通过WebSocket建立长链接实时获取数据
- WebSocket+多线程python socket网页版实时在线聊天实现
- websocket实现android A 通过服务器实时控制android B
- html上面通过websocket接收二进制图片数据并显示在页面上
- Java 使用Spring WebSocket 实现linux tailf 实时日志显示
- WebSocket和kafka实现数据实时推送到前端
- android中的websocket 应用 websocket 在实际的应用中不仅仅能做聊天应用,还可以利用websocket长连接保持数据的实时更新以及信息的推送。 websocket 的实现的
- android中的websocket 应用 websocket 在实际的应用中不仅仅能做聊天应用,还可以利用websocket长连接保持数据的实时更新以及信息的推送。 websocket 的实现的
- 实现通过网页中的链接启动APP
- WebSocket实现网页聊天室
- Service+WebSocket实现实时定位
- Android6.0以上版本去除应用权限
- 受限玻尔兹曼机基础教程
- c语言日志封装-输出文件名、函数名、行号
- SQL循环拆分
- python3-列表练习
- 通过webSocket实现app运动数据在网页实时显示
- 聊聊极简风格的过去与现在
- 日常操作命令
- MTK Android 5.0以上版本的变化
- 快速排序PYTHON
- Meet Surprise让你展现自己的美
- 服务器集群负载均衡原理
- 告别乱码,针对GBK、UTF-8两种编码的智能URL解码器的java实现
- 在CentOS release 6.8 (Final) 上安装 rabbitmq-server-3.6.12