SSM框架下使用websocket实现后端发送消息至前端

最新推荐文章于 2023-03-09 09:39:38 发布

spring_root

最新推荐文章于 2023-03-09 09:39:38 发布

阅读量1.8k

点赞数 2

分类专栏： websocket 文章标签： ssm下websocket

本文链接：https://blog.csdn.net/baidu_39322753/article/details/99934256

版权

本篇文章本人是根据实际项目需求进行书写的第一版，里面有些内容对大家或许没有用，但是核心代码本人已对其做了红色标注。文章讲解我将从maven坐标、HTML页面、js文件及后端代码一起书写。

一、maven坐标

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>${spring.version}</version>
</dependency>

二、HTML页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="${basePath}/static/css/home/index.css">
<script src="${basePath}/static/js/common/jquery-1.8.3.min.js"></script>
<script src="${basePath}/static/js/home/index.js"></script>
<script src="${basePath}/static/css/layui/layui.js"></script>
<title>后台管理系统</title>
</head>
<body>
<input type="hidden" value="${userId}" id="userId">
<input type="hidden" value="${cnName}" id="cnName">
<div class="tanchuang">
<div class="tanchuangClose"><span class="tanchuangCloseBtn">关闭</span></div>
<h6>消息提示：</h6>
<div id="messages"></div>
</div>

<script src="${basePath}/static/js/home/index.js"></script>
<script src="/static/js/webSocket.js"></script>
</body>
</html>

三、js文件（websocket.js）

var websocket;
// var host = document.location.host;
var userId = $("#userId").val(); // 获得当前登录人员的userName
var cnName=$("#cnName").val();
// alert(username)
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
// alert("浏览器支持Websocket")
if(websocket ==null){
//以下用的是ip路径，那么在本地启动项目时也需要使用ip地址进行访问
websocket = new WebSocket("ws://192.168.2.122:8080/webSocket/"+userId+"/"+cnName);
}
} else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function() {
// setMessageInnerHTML("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function() {
// alert("WebSocket连接成功")
// setMessageInnerHTML("WebSocket连接成功");
}
//接收到消息的回调方法