标签：websocket 浅谈 后端 webSocketSet session WebSocket message public
做的项目中需要将后端提供的数据展示在前端页面，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着实现，但总感觉数据不是实时刷新的，而且还占用资源，所以学习WebSocke，并总结了一下，以下是本人总结的前后端WebSocke相关代码：
一、后端：
1.pom.xml添加WebSocke依赖
<!-- SpringBoot Websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2.WebSocke配置类
@Configuration
public class WebSocketConfig {
/**
* 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就
不需要该配置文件
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}3.WebSocke服务类
@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
@Component
@EnableScheduling// cron定时任务
@Data
public class WebSocket {
private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);
/**
* 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
*/
private static int onlineCount = 0;
/**
* concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
*/
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
/**
* 与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
private Session session;
public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {
return webSocketSet;
}
public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {
WebSocket.webSocketSet = webSocketSet;
}
/**
* 从数据库查询相关数据信息,可以根据实际业务场景进行修改
*/
@Resource
private IndexService indexService;
private static IndexService indexServiceMapper;
@PostConstruct
public void init() {
WebSocket.indexServiceMapper = this.indexService;
}
/**
* 连接建立成功调用的方法
*
* @param session 会话
*/
@OnOpen
public void onOpen(Session session) throws Exception {
this.session = session;
webSocketSet.add(this);
//查询当前在线人数
int nowOnline = indexServiceMapper.nowOnline();
this.sendMessage(JSON.toJSONString(nowOnline));
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
logger.info("参数信息：{}", message);
//群发消息
for (WebSocket item : webSocketSet) {
try {
item.sendMessage(JSON.toJSONString(message));
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
if (session != null) {
try {
session.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 发生错误时调用
*
* @param session 会话
* @param error 错误信息
*/
@OnError
public void one rror(Session session, Throwable error) {
logger.error("连接异常！");
error.printStackTrace();
}
/**
* 发送信息
*
* @param message 消息
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 自定义消息推送、可群发、单发
*
* @param message 消息
*/
public static void sendInfo(String message) throws IOException {
logger.info("信息:{}", message);
for (WebSocket item : webSocketSet) {
item.sendMessage(message);
}
}
}
4.定时任务（为了给前端实时推送数据，我这里写了个定时任务，定时任务我用的是cron表达式,不懂的同学可以上这个网址学习：cron表达式）
@Slf4j
@Component
public class IndexScheduled {
@Autowired
private IndexMapper indexMapper;
/**
* 每3秒执行一次
*/
//@Scheduled(cron = "0/3 * * * * ? ")
public void nowOnline() {
System.err.println("********* 首页定时任务执行 **************");
CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();
int nowOnline = indexMapper.nowOnline();
webSocketSet.forEach(c -> {
try {
c.sendMessage(JSON.toJSONString(nowOnline));
} catch (IOException e) {
e.printStackTrace();
}
});
System.err.println("/n 首页定时任务完成.......");
}
}二、前端：
前端的代码非常的简单，直接上代码。
<body class="gray-bg">
<div class="online">
<span class="online">测试在线人数：<span id="online"></span> 人</span>
</div>
<script th:inline="javascript">
let websocket = null;
let host = document.location.host;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//连接WebSocket节点
websocket = new WebSocket("ws://" + host + "/webSocket");
} else {
alert('浏览器不支持webSocket');
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
setMessageInnerHTML("open");
};
//接收到消息的回调方法
websocket.onmessage = function (event) {
let data = event.data;
console.log("后端传递的数据:" + data);
//将后端传递的数据渲染至页面
$("#online").html(data);
};
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("close");
};
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
};
//关闭连接
function closeWebSocket() {
websocket.close();
};
//发送消息
function send() {
let message = document.getElementById('text').value;
websocket.send(message);
};
</script>
</body>
标签：websocket,浅谈,后端,webSocketSet,session,WebSocket,message,public 来源： https://www.cnblogs.com/wyj-java/p/16139050.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。