WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——可以通俗的解释为服务器主动发送信息给客户端。
websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信。
在websocket中有两个方法:
1、send() 向远程服务器发送数据
2、close() 关闭该websocket连接
websocket同时还定义了几个监听函数
1、onopen 当网络连接建立时触发该事件
2、onerror 当网络发生错误时触发该事件
3、onclose 当websocket被关闭时触发该事件
4、onmessage 当websocket接收到服务器发来的消息时触发的事件,也是通信中最重要的一个监听事件。
websocket还定义了一个readyState属性,这个属性可以返回websocket所处的状态:
1、CONNECTING(0) websocket正尝试与服务器建立连接
2、OPEN(1) websocket与服务器已经建立连接
3、CLOSING(2) websocket正在关闭与服务器的连接
4、CLOSED(3) websocket已经关闭了与服务器的连接
websocket的url开头是ws,如果需要ssl加密可以使用wss,当我们调用websocket的构造方法构建一个websocket对象(new WebSocket(url))之后,就可以进行即时通信了。
Spring官方文档:http://docs.spring.io/spring/docs/current/spring-framework-reference/html/websocket.html
spring4.0以上支持websocket,要求servlet-api必须是3.0+
WebSocket:
<!-- WebSocket -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.0.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>4.0.2.RELEASE</version>
</dependency>
Servlet-api
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
web.xml的namespace也要确保是3.0+
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
// 使用<absolute-ordering />来选择性地启用或禁用Web片段(和SCI扫描)
<absolute-ordering/>
</web-app>
如果要支持异步的servlet3.x,可以在web.xml下的servlet和filter里面加上
<async-supported>true</async-supported>
service服务端的具体实现
首先是配置文件类(注解),给服务器添加websocket服务
@Configuration
@EnableWebSocket
public class MyWebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
@Autowired
MyWebSocketHandler handler;
public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
//前台 可以使用websocket环境
webSocketHandlerRegistry.addHandler(handler, "/chats/connect/socket").addInterceptors(new MyHandShakeInterceptor());
//前台 不可以使用websocket环境,则使用sockjs进行模拟连接
webSocketHandlerRegistry.addHandler(handler, "/chats/connect/socket/sockjs").addInterceptors(new MyHandShakeInterceptor()).withSockJS();
}
}
然后是创建握手拦截器
public class MyHandShakeInterceptor implements HandshakeInterceptor {
private static final Logger logger = LogManager.getLogger(MyWebSocketHandler.class);
public boolean beforeHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Map<String, Object> map) throws Exception {
if (serverHttpRequest instanceof ServletServerHttpRequest) {
HttpServletRequest servletRequest = ((ServletServerHttpRequest) serverHttpRequest).getServletRequest();
//当前的登录者
Long userId = (Long) servletRequest.getSession().getAttribute("userId");
if(userId!=null){
map.put("uid", userId);//为服务器创建WebSocketSession做准备
logger.info("用户id:"+userId+" 加入");
}else{
logger.error("没有获取session中的当前登陆者信息");
}
}
return true;
}
public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
logger.info("握手后");
}
}
最后是创建websocket的处理类
@Component
public class MyWebSocketHandler implements WebSocketHandler {
@Autowired
private ChatService chatService;
@Autowired
private ChatMessageService chatMessageService;
private static final Logger logger = LogManager.getLogger(MyWebSocketHandler.class);
// 保存所有的用户session
private final static Map<Long,WebSocketSession> sessions = new HashMap<>();
//握手实现连接后
@Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
logger.info("连接成功。。。。。。");
Long userId = (Long) webSocketSession.getAttributes().get("uid");
if(sessions.get(userId) == null)
sessions.put(userId,webSocketSession);
logger.info("session: "+sessions);
}
//发送信息前的处理
@Override
public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {
logger.info("用户"+webSocketSession.getAttributes().get("uid")+":发送消息:" + webSocketMessage.getPayload().toString());
String message = webSocketMessage.getPayload().toString();
String[] buf = message.split(":");
if(buf.length == 2){ //切换聊天,用来标记发送方的信息已读
Long chatId = Long.valueOf(buf[1]);
chatService.setRead(chatId,(Long) webSocketSession.getAttributes().get("uid"));
}
if(buf.length == 3){ //发送消息
Long chatId = Long.valueOf(buf[1]);
String content = buf[2];
Chat chat = chatService.getChat(chatId);
Long userFromId = (Long) webSocketSession.getAttributes().get("uid"); //当前登录者为发送者
Long userToId = null;
if(userFromId == chat.getUserId()){
userToId = chat.getOppositeUser().getId();
}else{
userToId = chat.getUserId();
}
//将信息保存至数据库
try {
ChatMessage chatMessage = chatMessageService.addChatMessage(userFromId, chat.getId(), content);
String sendMsg = "{\"chatId\":"+chatId+",\"message\":{\"uuid\":\""+chatMessage.getUuid()+"\",\"content\":\""+chatMessage.getContent()+
"\",\"createdAt\":"+chatMessage.getCreatedAt().getTime()+",\"user\":{\"id\":"+chatMessage.getUser().getId()+",\"slug\":\""+chatMessage.getUser().getSlug()+
"\",\"nickname\":\""+chatMessage.getUser().getNickname()+"\",\"avatar\":\""+chatMessage.getUser().getAvatar().getPath()+"\"}}}";
logger.info("接收的消息格式:"+sendMsg);
//发送Socket信息
sendMessageToUser(userToId, new TextMessage(sendMsg,true),webSocketSession);
}catch (Exception e){
e.printStackTrace();
}
}
//将JSON格式的消息通过Gson转换成Map
//通过getPayload().toString()获取消息具体内容
//Map<String,String> msg = new Gson().fromJson(webSocketMessage.getPayload().toString(),new TypeToken<Map<String, String>>() {}.getType());
}
@Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
if (webSocketSession.isOpen()) {
webSocketSession.close();
}
sessions.remove(webSocketSession.getAttributes().get("uid"));
logger.info("webSocket异常处理" + throwable.getMessage());
}
@Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
logger.info("连接关闭");
sessions.remove(webSocketSession.getAttributes().get("uid"));
}
@Override
public boolean supportsPartialMessages() {
return false;
}
//发送信息的实现
public void sendMessageToUser(Long uid, TextMessage message,WebSocketSession webSocketSession) throws IOException {
WebSocketSession userToSession = null;
//遍历所有已连接的用户
for (Map.Entry<Long, WebSocketSession> entry : sessions.entrySet()) {
Long connectedUserId = (Long) entry.getValue().getAttributes().get("uid");
if (connectedUserId == uid) {
userToSession = entry.getValue();
break;
}
}
if(userToSession == null){
logger.info("对方暂时不在线");
webSocketSession.sendMessage(new TextMessage("对方暂时不在线"));
}
if (userToSession != null && userToSession.isOpen()) {
logger.info("发送消息给:"+uid);
userToSession.sendMessage(message);
}
}
}
client客户端的实现
登录页面
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h1>登录</h1>
<table>
<tr>
<td>用户名</td>
<td>
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="token" id="token">
<!-- 验证码地址 -->
<img src="/token/get_token?type=login">
</td>
</tr>
<tr>
<td>
<button id="submit_btn">登录</button>
</td>
<td></td>
</tr>
</table>
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
var $email = $('#email'),
$password = $('#password'),
$token = $('#token');
$("#token").blur(function() {
var token = {token: $token.val()};
console.log(token);
$.ajax({
url: '/token/check?type=login', // 验证码校验地址
type: 'POST',
data: JSON.stringify(token),
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (resp) {
alert('成功');
console.log(resp)
},
error: function(resp) {
alert('失败');
console.log(resp)
}
});
});
$("#submit_btn").click(function() {
var data = {email: $email.val(), password: $password.val(), token: $token.val()};
console.log(data);
$.ajax({
url: '/users/login', // 登录地址
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (resp) {
alert('成功');
console.log(resp)
},
error: function(resp) {
alert('失败');
console.log(resp)
}
});
})
})
</script>
</body>
</html>
聊天室页面展示
chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 JQuery -->
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<!-- 引入 sockJS -->
<script type="text/javascript" src="/js/sockjs.min.js" ></script>
<!-- 自定义JS文件 -->
<script type="text/javascript" src="/js/chat.js"></script>
</head>
<body>
<!-- 最外边框 -->
<div style="margin: 20px auto; border: 1px solid blue; width: 300px; height: 500px;">
<!-- 消息展示框 -->
<div id="msg" style="width: 100%; height: 70%; border: 1px solid yellow;overflow: auto;"></div>
<!-- 消息编辑框 -->
<textarea id="tx" style="width: 100%; height: 20%;"></textarea>
<!-- 消息发送按钮 -->
<button id="TXBTN" style="width: 100%; height: 8%;">发送数据</button>
</div>
</body>
</html>
JS-客户端主要的实现
chat.js
$(function() {
var websocket;
// 首先判断是否支持WebSocket
if('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/chats/connect/socket");
} else if('MozWebSocket' in window) {
websocket = new MozWebSocket("ws://localhost:8080/chats/connect/socket");
} else {
websocket = new SockJS("http://localhost:8080/chats/connect/socket/sockjs");
}
// 打开时
websocket.onopen = function(event) {
console.log("连接成功");
console.log(event);
};
// 处理消息时
websocket.onmessage = function(event) {
$("#msg").append(event.data);
console.log("处理消息");
console.log(event);
};
websocket.onerror = function(event) {
console.log("连接失败");
console.log(event);
};
websocket.onclose = function(event) {
console.log("socket连接断开");
console.log(event);
};
// 点击了发送消息按钮的响应事件
$("#TXBTN").click(function(){
// 获取消息内容
var text = $("#tx").val();
// 判断
if(text == null || text == ""){
alert(" content can not empty!!");
return false;
}
//var msg = {
// content: text
//};
// 发送消息
//websocket.send(JSON.stringify(msg));
websocket.send("message:"+1+":"+text);
});
});
参考文章:
Spring MVC 自学杂记(四) -- Spring+SpringMVC+WebSocket
SSM框架+WebSocket实现网页聊天(Spring+SpringMVC+MyBatis+WebSocket)