一概述
## 在项目中有这样一个需要,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。