使用场景:后台进入一个页面,然后页面中有个按钮需要第三方授权,授权成功后刷新这个页面
话不多说..直接上代码
1.框架使用的是Spring Boot的,所以引用webSocket对应的jar
<!--websocket服务端-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.后端socket代码
2.1:先创建个WebSocketConfig类
package com.sg.pay.common.config.webSocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* Created by huang(jy) on 2018/10/27.
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
2.2:创建websocket核心代码
(其中我通过传递userId作为一个代表每个页面的key值,用于第三方授权成功后通过userId通知到具体的session进行刷新页面,这个地方大家可以考虑有什么办法如何刷新具体的页面)
package com.sg.pay.common.config.webSocket;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* Created by huang(jy) on 2018/10/27.
*/
@ServerEndpoint(value = "/websocket/{userId}")
@Component
public class MyWebSocket {
private static final Logger LOGGER = LoggerFactory.getLogger(MyWebSocket.class);
//静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();
public static Map<String, Session> sessionMap = new ConcurrentHashMap<>();
//与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session
, @PathParam("userId") String userId) {
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
try {
LOGGER.info("addUserId:" + userId);
//用于缓存每个具体的页面
sessionMap.put(userId, this.session);
sendMessage("add");
} catch (Exception e) {
System.out.println("IO异常");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //从set中删除
sessionMap.remove(this.session.getId());
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
//群发消息
for (MyWebSocket item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 发生错误时调用
* */
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
public void sendMessage(String message) throws IOException {
//群发消息
for (MyWebSocket item : webSocketSet) {
try {
item.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
public void sendMessage(String userId, String message) throws IOException {
LOGGER.info("sendUserId:" + userId);
//获取到具体的session后发送信息到对应页面
sessionMap.get(userId).getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
/**
* 群发自定义消息
* */
public static void sendInfo(String message) throws IOException {
for (MyWebSocket item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
continue;
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
MyWebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
MyWebSocket.onlineCount--;
}
}
//第三方成功授权后,调用socket通知页面
3.前端代码
<script src="http://pay.dev.xmsvn.com/js/jquery.min.js?v=2.1.4" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var websocket = null;
console.log(userId);
console.log(serverIpPort);
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//建立连接,这里的/websocket ,是ManagerServlet中开头注解中的那个值
websocket = new WebSocket("ws://"+ serverIpPort + "/websocket/" + userId);
} else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
};
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
console.log(event.data);
if(event.data !="add"){
// if(event.data =="SUCCESS"){
// layer.msg("授权成功",{time:2000});
// }else {
// layer.msg("授权失败",{time:2000});
// }
layer.msg("操作成功",{time:2000});
self.setInterval(function(){ // 这个方法是说在延迟两秒后执行大括号里的方法
location.reload(); // 这个方法是刷新当前页面
},2000) //这里2000代表两秒
}
};
//连接关闭的回调方法
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();
};
</script>
(注意:部署到Linux上时对应的端口需要开放websock协议)
扫描二维码关注公众号,回复:
5021842 查看本文章
如有转载请请务必保留此出处:https://blog.csdn.net/hometing218/article/details/84140580