之前一直WebSocket 是及时通信技术,也可以进行消息推送,但是现在市面成熟的消息推送第三方也确实不少,功能也很全,比如极光推送…但是也一直没有机会用到,不过近期有个需求是这样的,在一个客户端 点击开始按钮 ,同时7个app端开始倒计时 这样一个需求 ,自己 觉得这个必须得用到WebSocket 了,毕竟以后可能要接触到物联网, 也就简单百度学习了一下 ,玩了一下最基本的案例
还是先介绍一下WebSocket
一.WebSocket是什么:
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.
二.WebSocket有什么用:
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
这张图很好的诠释了用ajax做轮询和Webscoket的区别
三.Webscoket怎么用
关键点来了,跑过案例的你会发现,超级简单
首先你要先引入相应的jar包
<!--webscoket-->
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
然后我们得准备一个能接收webscoket的服务
package com.thinkgem.jeesite.modules.session.web;
import org.springframework.stereotype.Controller;
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--;
}
}
前端,先创建个webscoket的对象 参数传能访问到后台服务器的路径
//WebScoket
var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://192.168.0.173:8080/xyexams/websocket");
// websocket = new WebSocket("ws://192.168.0.75:8080/xyexams/websocket");
}
else{
alert('Not support websocket');
}
//连接发生错误的回调方法
websocket.onerror = function(){
console.info("error")
};
//连接成功建立的回调方法
websocket.onopen = function(event){
console.info("open")
};
//接收到消息的回调方法
websocket.onmessage = function(event){
var data = JSON.parse(event.data)
console.log(data)
};
//连接关闭的回调方法
websocket.onclose = function(){
console.info("onclose")
};
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
};
//关闭连接
function closeWebSocket(){
websocket.close();
}
触发一个事件,发送消息调用 websocket.send()函数,然后消息都会在 websocket.onmessage 函数中接收, 我这里将参数 拼接成了json串用Webscoket中传输 , 不同的json 处理不同的业务逻辑