简述：支持发送公告、发送指定用户及异地登录。
spring mvc需要的jar包：
image.png
使用spring boot 可以集成websocket库，如果少了其他库，可以在启动spring boot项目看控制台报什么错，再添加相对应的库即可。
需要的JavaScript库：
sockjs.js
stomp.js
定义收发消息实体类：
package com.test.springWebsocket;
public class WebMessage {
/**
* 用户id
*/
private Long userId;
/**
* 用户名
*/
private String username;
/**
* 客户端标记
*/
private String clientMark;
/**
* 内容
*/
private String contents;
/**
* 消息类型，1.公告，2.点对点发消息，3.检查异地登录
*/
private String type;
public Long getUserId() {
return userId;
}
public void setUserId(Long userId) {
this.userId = userId;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getClientMark() {
return clientMark;
}
public void setClientMark(String clientMark) {
this.clientMark = clientMark;
}
public String getContents() {
return contents;
}
public void setContents(String contents) {
this.contents = contents;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
定义WebSocket配置：
package com.test.springWebsocket;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
//客户端与服务器端建立连接的点，允许使用sockJs方式访问，允许跨域
stompEndpointRegistry.addEndpoint("/any-socket").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry messageBrokerRegistry) {
//订阅Broker名称
messageBrokerRegistry.enableSimpleBroker("/topic", "/user");
//全局使用的订阅前缀(客户端订阅路径上会体现出来)
messageBrokerRegistry.setApplicationDestinationPrefixes("/app");
//点对点使用的订阅前缀(客户端订阅路径上会体现出来)，不设置的话，默认也是/user/
//注意:enableSimpleBroker方法里的某个参数路径必须和该方法的路径要一样，不然指定用户发送消息将会失败
messageBrokerRegistry.setUserDestinationPrefix("/user/");
}
}
定义WebSocketController：
package com.test.springWebsocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
@Controller
public class WebSocketController {
@Autowired
private SimpMessagingTemplate template;
/**
* 发送公告
*
* @param msg WebMessage
*/
@MessageMapping("/to-all")
public void toAll(WebMessage msg) {
template.convertAndSend("/topic/to-all", msg);
}
/**
* 发送指定用户
*
* @param msg WebMessage
*/
@MessageMapping("/to-one")
public void toOne(WebMessage msg) {
Long userId = msg.getUserId();
if (userId != null) {
template.convertAndSendToUser(userId.toString(), "/to-one", msg);
}
}
}
定义jsp页面RequestMapping：
/**
* spring WebSocket 页面
*
* @param request HttpServletRequest
* @return String
*/
@RequestMapping("/spring-websocket.xhtm")
public String springWebsocket(HttpServletRequest request) {
String clientMark = (String) request.getSession().getAttribute("clientMark");
if (clientMark == null) {
clientMark = GenerateUtil.getUUID();
request.getSession().setAttribute("clientMark", clientMark);
}
Admin admin = (Admin) request.getSession().getAttribute("admin");
request.setAttribute("userId", admin.getId());
request.setAttribute("username", admin.getAdmin());
request.setAttribute("clientMark", clientMark);
return "springWebsocket/springWebsocket";
}
定义jsp页面：
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
String rootPath = request.getContextPath();
String basePath = request.getScheme() + "://" +
request.getServerName() + ":" +
request.getServerPort() + rootPath + "/";
%>
<html>
<head>
<title>Spring WebSocket</title>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
.msgBox {
height: 300px;
width: 800px;
border: 2px solid #2196F3;
overflow: auto;
}
</style>
<script type="text/javascript">
var rootPath = "<%=rootPath%>";
var basePath = "<%=basePath%>";
var userId = '${userId}';
var username = '${username}';
var clientMark = '${clientMark}';
</script>
<script type="text/javascript" src="<%=basePath%>static/js/plugins/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/common/sockjs.v1.0.0.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/common/stomp.v2.3.3.js"></script>
</head>
<body>
<div>用户id:${userId}</div>
<div>用户名:${username}</div>
<div>
<span>公告:</span><input type="text" name="notice"/>
<button type="button" id="notice">发送</button>
</div>
<div>
<span>用户id:</span><input type="text" name="userId"/>
<span>内容:</span><input type="text" name="contents"/>
<button type="button" id="sendToUser">发送</button>
</div>
<div>公告列表:</div>
<div id="noticeList" class="msgBox"></div>
<div>消息列表:</div>
<div id="msgList" class="msgBox"></div>
<script type="text/javascript" src="<%=basePath%>static/js/springWebsocket/springWebsocket.js"></script>
</body>
</html>
定义JavaScript脚本：
var socket = null;
var stompClient = null;
function closeSocket() {
if (socket == null || socket.readyState == 2 || socket.readyState == 3) {
return true;
}
socket.close();
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常.
window.onbeforeunload = function () {
closeSocket();
};
function showMsg(webMsg) {
switch (webMsg['type']) {
//公告
case '1': {
var noticeHtm = '<div>' + webMsg['contents'] + '</div>';
$('#noticeList').append(noticeHtm);
$("#noticeList").scrollTop($("#noticeList")[0].scrollHeight);
break;
}
//点对点发消息
case '2': {
var msgHtm = '<div>' + webMsg['contents'] + '</div>';
$('#msgList').append(msgHtm);
$("#msgList").scrollTop($("#msgList")[0].scrollHeight);
break;
}
//检查异地登录
case '3': {
if (webMsg['clientMark'] != clientMark) {
closeSocket();
alert('您的账号在另一处登录');
}
break;
}
default: {
alert("WebSocket接收到未知消息...");
break;
}
}
}
function connect() {
socket = new SockJS(rootPath + '/any-socket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
// 订阅 /topic/to-all 实现公告
stompClient.subscribe(rootPath + '/topic/to-all', function (dd) {
showMsg(JSON.parse(dd.body));
});
// 订阅 /user/userId/to-one 实现点对点
stompClient.subscribe(rootPath + '/user/' + userId + '/to-one', function (dd) {
showMsg(JSON.parse(dd.body));
});
var webMsg = {
'userId': userId,
'username': username,
'clientMark': clientMark,
'type': '3'
};
stompClient.send(rootPath + "/app/to-one", {}, JSON.stringify(webMsg));
});
}
connect();
$(function () {
$('#notice').on('click', function () {
if (socket == null) {
alert('WebSocket连接未打开');
return true;
}
if (socket.readyState == 0) {
alert('WebSocket正在连接中，请稍后再发送消息');
return true;
}
if (socket.readyState == 2) {
alert('WebSocket连接正在关闭中，无法发送消息');
return true;
}
if (socket.readyState == 3) {
alert('WebSocket连接已关闭，无法发送消息');
return true;
}
var webMsg = {
'contents': $('input[name="notice"]').val(),
'type': '1'
};
stompClient.send(rootPath + "/app/to-all", {}, JSON.stringify(webMsg));
});
$('#sendToUser').on('click', function () {
if (socket == null) {
alert('WebSocket连接未打开');
return true;
}
if (socket.readyState == 0) {
alert('WebSocket正在连接中，请稍后再发送消息');
return true;
}
if (socket.readyState == 2) {
alert('WebSocket连接正在关闭中，无法发送消息');
return true;
}
if (socket.readyState == 3) {
alert('WebSocket连接已关闭，无法发送消息');
return true;
}
var webMsg = {
'userId': $('input[name="userId"]').val(),
'username': username,
'contents': $('input[name="contents"]').val(),
'type': '2'
};
stompClient.send(rootPath + "/app/to-one", {}, JSON.stringify(webMsg));
});
});
网友评论