消息推送
消息推送是针对 Web 应用开发领域的技术,指服务端以主动方式将信息送达客户端。主要用于提升用户体验,避免用户刷新页面从服务端拉取数据。例如 Web 邮件中自动出现刚收到的邮件项,Web 即时通讯自动提示新到消息等应用场景。
推送方式
-
轮询(Polling)
AJAX 定时(可以使用JS的 setTimeout 函数)去服务器查询是否有新消息,从而进行增量式的更新。这种方式间隔多长时间再查询是个问题,间隔太短,海量的请求会拖垮服务器,间隔太长,服务器上的新数据就需要更长的时间才能到达客户机。35729[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AjvxhC6C-1599921492095)(https://public.dm.files.1drv.com/y4pyMgdq4f9dKyAkvk6P4Cqm_LHNmCsBajTK-iScwPgaKbwt_EBeVZCrEii80hQwsCW96wm8McYxl18N8bBppSf7QO_o2_ICNXNbTFnVgTy8xsSm_6iopIXxqLQLFJM1qshcULbpA2T2mvt1C4MnuDJTXDfHV2EIIM6Q-PTGYz-OJN_I7gHkuz7BPfkwhxXM1Wd/simple-poll.png?psid=1&rdrts=242115355)]
- 优点:服务端逻辑简单,可根据应用场景调整轮询时间间隔;
- 缺点:大多数请求是无效请求,在轮询很频繁的情况下对服务器的压力很大;
所以,除了一些简单练习项目外,这种方式不能被用于生产。
-
长轮询(Long-Polling)
客户端向服务器发送AJAX请求,服务器接到请求后将该请求挂起,直到有新消息或超时(设置)才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wNYvEX6-1599921492101)(https://public.dm.files.1drv.com/y4pngDukCIBk1UUwT6VsIjB3Ge83plAT-tmvYWNYEsm-yjyvKK9DswRYAxTPew1kQhq1IFN8nxNqYvAtIiGPCv7WA4n5wZm3ztKei8aMFKUuVRomWo_p1wg4OqNyr6l3hqIp_bOGtwMWm-7j0uOrEAx1WjwzyJyaztANnfkGX87ZZVq4xUguNjIzbOw_iuzGSZQ/long-poll.png?psid=1&rdrts=242115355)]
- 优点:任意浏览器都可用;实时性好,无消息的情况下不会进行频繁的请求;
- 缺点:连接创建销毁操作还是比较频繁,服务器维持着连接比较消耗资源;
-
插件提供的Socket方式
利用Flash XMLSocket,Java Applet套接口,Activex包装的socket。
-
优点:原生socket的支持,和PC端和移动端的实现方式相似;
-
缺点:浏览器端需要装相应的插件;
-
-
WebSocket
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b3Js2x6y-1599921492103)(img/1567594143540.png)]
- 缺点: 只兼容IE10及以上,但还是有解决方案的,只需要在前端引入相应的库便可,可参考该文章https://juejin.im/post/5aef0e9c518825673a20754d.
WebSocket简介
轮询的效率低下,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开),而 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
1. websocket是什么
它是一种网络通信协议,是 HTML5
开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程.其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时,可以使服务器避免打开多个HTTP连接进行工作来节约资源,提高了工作效率和资源利用率。
WebSocket目前支持两种统一资源标志符ws
(80端口)和wss
(443端口),类似于HTTP和HTTPS。
2.websocket解决了http的哪些问题
- Websocket解决了HTTP的这几个难题。首先,被动性,当服务器完成协议升级后(HTTP->Websocket),服务端就可以主动推送信息给客户端。解决了上面同步有延迟的问题。
- 解决服务器上消耗资源的问题:其实我们所用的程序是要经过两层代理的,即HTTP协议在Nginx等服务器的解析下,然后再传送给相应的Handler(php等)来处理。简单地说,我们有一个非常快速的 接线员(Nginx) ,他负责把问题转交给相应的 客服(Handler) 。Websocket就解决了这样一个难题,建立后,可以直接跟接线员建立持久连接,有信息的时候客服想办法通知接线员,然后接线员在统一转交给客户。
- 由于Websocket只需要一次HTTP握手,所以说整个通讯过程是建立在一次连接/状态中,也就避免了HTTP的非状态性,服务端会一直知道你的信息,直到你关闭请求,这样就解决了接线员要反复解析HTTP协议的问题。
3.websocket握手
websocket是基于http协议 也可以说借用了http完成了一部分握手。
websocket标准的请求头:
GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8001
Origin: http://127.0.0.1:8001
Sec-WebSocket-Key: hj0eNqbhE/A0GkBXDRrYYw==
Sec-WebSocket-Version: 13
在这个请求头中,Upgrade
用于告诉服务器协议升级, Sec-WebSocket-Key
是客户端也就是浏览器或者其他终端随机生成一组16位的随机base64编码; Sec-WebSocket-Version
就是当前使用协议的版本号
服务器在接受到上面的请求之后,会返回一个response 头包完成握手。
HTTP/1.1 101 Switching Protocols
Content-Length: 0
Upgrade: websocket
Sec-Websocket-Accept: ZEs+c+VBk8Aj01+wJGN7Y15796g=
Server: TornadoServer/4.5.1
Connection: Upgrade
Date: Wed, 21 Jun 2017 03:29:14 GMT
由Sec-Websocket-Accept
的key完成校验
4. 使用websocket所需jar包
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.1</version>
<scope>provided</scope>
</dependency>
5.Javascript 使用websocket建立连接
表单页面:
<div>
<hr>
您的姓名:<input type="text" id="username">
<hr>
<button onclick="build()">建立连接</button>
</div>
<hr>
<div>
发送给:<input type="text" id="tousername">
</div>
<hr>
<div>
<textarea rows="10" cols="100" id="content">
</textarea>
<br> <br>
<button onclick="send()">发送</button>
</div>
<div id="showMessage"></div>
js 代码
<script>
var websocket = null;
function build() {
var username = $("#username").val();
if ('WebSocket' in window) {
websocket = new WebSocket(
"ws://localhost:8080/JavaWebSocket/websocket?username=" + username);
//连接成功建立的回调方法
websocket.onopen = function () {
$("#showMessage").append("<p color='red'>build success!</p>");
$("#tousername").append("<option>" + username + "</option>");
}
//连接发生错误的回调方法
websocket.onerror = function () {
alert("登录失败");
};
//连接关闭的回调方法
websocket.onclose = function () {
$("#showMessage").html("连接关闭");
};
//接收到消息的回调方法
websocket.onmessage = function (e) {
var jsonObject = JSON.parse(e.data);
$("#showMessage").append("<p>" + jsonObject.from + "对" + jsonObject.to + "说:" + jsonObject.content + "</p>");
};
} else
alert("Not Support!");
}
window.onbeforeunload = function () {
if (null != websocket)
websocket.close();
};
function send() {
var username = $("#username").val();
var content = $("#content").val();
var tousername = $("#tousername").val();
var mes = {
"from": username,
"to": tousername,
"content": content
};
if (null != websocket)
websocket.send(JSON.stringify(mes));
}
</script>
6. Java代码
/**
* @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
* 注解的值将被用于监听用户连接的终端访问URL地址,
*/
@ServerEndpoint("/websocket")
public class WebSocket {
private String username;
private static ConcurrentMap<String, WebSocket> users = new ConcurrentHashMap<String, WebSocket>();
private Session session;
// 这个方法是根据自己的需要写的,不是必须
private void sendMessage(String mes) {
this.session.getAsyncRemote().sendText(mes);
}
/**
* 连接建立成功调用的方法
*
* @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
Map<String, List<String>> map = session.getRequestParameterMap();
username = map.get("username").get(0);//url中携带的参数
users.put(username, this);
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
users.remove(username);
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
// 把接收到的json数据转化成MessageDto对象
Gson gson = new Gson();
MessageDto mes = gson.fromJson(message, MessageDto.class);
if (mes.getTo() == null) {
Set<String> key = users.keySet();
for (String k : key) {
if (k.equals(mes.from)) continue;
users.get(k).sendMessage(message);
}
} else {
WebSocket toServlet = users.get(mes.getFrom());
WebSocket toServlet2 = users.get(mes.getTo());
if (null != toServlet) {
// 向信息发送目标信息
toServlet.sendMessage(message);
// 向信息来源发送信息
toServlet2.sendMessage(message);
}
}
}
}
7. 文档参考网站
Javascript : https://www.runoob.com/html/html5-websocket.html(菜鸟教程)
websocket与http对比: https://www.cnblogs.com/fuqiang88/p/5956363.html
IE等低版本浏览器兼容问题: https://juejin.im/post/5aef0e9c518825673a20754d