現(xiàn)在用springboot集成websocket變的很方便快捷了,下面簡(jiǎn)單寫(xiě)個(gè)小demo,實(shí)現(xiàn)群發(fā)消息,單對(duì)單的聊天。主要是功能,界面將就一下。
參考:
http://tech.lede.com/2017/03/08/qa/websocket+spring/
https://blog.csdn.net/mr_zhuqiang/article/details/46618197
開(kāi)發(fā)工具是IDEA,2018.2.3




依照上圖的流程,新建一個(gè)簡(jiǎn)單的工程。
然后在pom文件中添加一些額外用到的插件。
完整的pom.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>websocketdemo1</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>websocketdemo1</name>
<description>springboot2.0+websocket的集成,實(shí)現(xiàn)群發(fā)消息+單對(duì)單消息推送.</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- json工具 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>LATEST</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<!-- 包含本地的 jar -->
<includeSystemScope>true</includeSystemScope>
<!--創(chuàng)建成系統(tǒng)服務(wù)在后臺(tái)運(yùn)行-->
<executable>true</executable>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<configuration>
<!--打包的時(shí)候, 略過(guò)test, 不運(yùn)行-->
<skipTests>true</skipTests>
</configuration>
</plugin>
</plugins>
</build>
</project>
1. 新建MyHandshake實(shí)現(xiàn)HandshakeInterceptor接口
從名字大致上就可以猜測(cè)出這個(gè)接口的含義,handshake,Interceptor。
這里主要是實(shí)現(xiàn)2個(gè)方法。
//握手之前干啥,常用來(lái)注冊(cè)用戶(hù)信息,綁定 WebSocketSession
beforeHandshake
//握手之后干啥
afterHandshake
完整的實(shí)現(xiàn)
package com.example.websocketdemo1.websocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.stereotype.Service;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
/**
* @author linyun
* @date 2018/9/13 下午3:12
*/
@Slf4j
@Service
public class MyHandshake implements HandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler webSocketHandler, Map<String, Object> attributes) throws Exception {
if (request instanceof ServletServerHttpRequest) {
HttpServletRequest servletRequest = ((ServletServerHttpRequest) request).getServletRequest();
// 從session中獲取到當(dāng)前登錄的用戶(hù)信息. 作為socket的賬號(hào)信息. session的的WEBSOCKET_USERNAME信息,在用戶(hù)打開(kāi)頁(yè)面的時(shí)候設(shè)置.
String userName = (String) servletRequest.getSession().getAttribute("WEBSOCKET_USERNAME");
attributes.put("WEBSOCKET_USERNAME", userName);
}
return true;
}
@Override
public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
}
}
2. 新建MyHandler實(shí)現(xiàn)WebSocketHandler接口
主要是負(fù)責(zé)消息的分發(fā),用戶(hù)統(tǒng)計(jì)等。
package com.example.websocketdemo1.websocket;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import org.springframework.web.socket.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
/**
* @author linyun
* @date 2018/9/13 下午3:26
*/
@Slf4j
@Service
public class MyHandler implements WebSocketHandler {
/**
* 為了保存在線(xiàn)用戶(hù)信息,在方法中新建一個(gè)list存儲(chǔ)一下【實(shí)際項(xiàng)目依據(jù)復(fù)雜度,可以存儲(chǔ)到數(shù)據(jù)庫(kù)或者緩存】
*/
private final static List<WebSocketSession> SESSIONS = Collections.synchronizedList(new ArrayList<>());
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
log.info("鏈接成功......");
SESSIONS.add(session);
String userName = (String) session.getAttributes().get("WEBSOCKET_USERNAME");
if (userName != null) {
JSONObject obj = new JSONObject();
// 統(tǒng)計(jì)一下當(dāng)前登錄系統(tǒng)的用戶(hù)有多少個(gè)
obj.put("count", SESSIONS.size());
users(obj);
session.sendMessage(new TextMessage(obj.toJSONString()));
}
}
@Override
public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
log.info("處理要發(fā)送的消息");
JSONObject msg = JSON.parseObject(message.getPayload().toString());
JSONObject obj = new JSONObject();
if (msg.getInteger("type") == 1) {
//給所有人
obj.put("msg", msg.getString("msg"));
sendMessageToUsers(new TextMessage(obj.toJSONString()));
} else {
//給個(gè)人
String to = msg.getString("to");
obj.put("msg", msg.getString("msg"));
sendMessageToUser(to, new TextMessage(obj.toJSONString()));
}
}
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
if (session.isOpen()) {
session.close();
}
log.info("鏈接出錯(cuò),關(guān)閉鏈接......");
SESSIONS.remove(session);
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
log.info("鏈接關(guān)閉......" + closeStatus.toString());
SESSIONS.remove(session);
}
@Override
public boolean supportsPartialMessages() {
return false;
}
/**
* 給所有在線(xiàn)用戶(hù)發(fā)送消息
*
* @param message
*/
public void sendMessageToUsers(TextMessage message) {
for (WebSocketSession user : SESSIONS) {
try {
if (user.isOpen()) {
user.sendMessage(message);
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 給某個(gè)用戶(hù)發(fā)送消息
*
* @param userName
* @param message
*/
public void sendMessageToUser(String userName, TextMessage message) {
for (WebSocketSession user : SESSIONS) {
if (user.getAttributes().get("WEBSOCKET_USERNAME").equals(userName)) {
try {
if (user.isOpen()) {
user.sendMessage(message);
}
} catch (IOException e) {
e.printStackTrace();
}
break;
}
}
}
/**
* 將系統(tǒng)中的用戶(hù)傳送到前端
*
* @param obj
*/
private void users(JSONObject obj) {
List<String> userNames = new ArrayList<>();
for (WebSocketSession webSocketSession : SESSIONS) {
userNames.add((String) webSocketSession.getAttributes().get("WEBSOCKET_USERNAME"));
}
obj.put("users", userNames);
}
}
3. 實(shí)現(xiàn)WebSocketConfigurer接口
主要的配置文件,很簡(jiǎn)單
package com.example.websocketdemo1.websocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/**
* @author linyun
* @date 2018/9/13 下午3:41
*/
@Slf4j
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Autowired
private MyHandshake handshake;
@Autowired
private MyHandler handler;
/**
* 實(shí)現(xiàn) WebSocketConfigurer 接口,重寫(xiě) registerWebSocketHandlers 方法,這是一個(gè)核心實(shí)現(xiàn)方法,配置 websocket 入口,允許訪問(wèn)的域、注冊(cè) Handler、SockJs 支持和攔截器。
* <p>
* registry.addHandler()注冊(cè)和路由的功能,當(dāng)客戶(hù)端發(fā)起 websocket 連接,把 /path 交給對(duì)應(yīng)的 handler 處理,而不實(shí)現(xiàn)具體的業(yè)務(wù)邏輯,可以理解為收集和任務(wù)分發(fā)中心。
* <p>
* addInterceptors,顧名思義就是為 handler 添加攔截器,可以在調(diào)用 handler 前后加入我們自己的邏輯代碼。
* <p>
* setAllowedOrigins(String[] domains),允許指定的域名或 IP (含端口號(hào))建立長(zhǎng)連接,如果只允許自家域名訪問(wèn),這里輕松設(shè)置。如果不限時(shí)使用”*”號(hào),如果指定了域名,則必須要以 http 或 https 開(kāi)頭。
*
* @param registry
*/
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
//部分 支持websocket 的訪問(wèn)鏈接,允許跨域
registry.addHandler(handler, "/echo").addInterceptors(handshake).setAllowedOrigins("*");
//部分 不支持websocket的訪問(wèn)鏈接,允許跨域
registry.addHandler(handler, "/sockjs/echo").addInterceptors(handshake).setAllowedOrigins("*").withSockJS();
}
}
4. 頁(yè)面模擬聊天
模擬用戶(hù)登錄,存儲(chǔ)用戶(hù)信息到session中。
package com.example.websocketdemo1;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
/**
* @author linyun
* @date 2018/9/13 下午3:45
*/
@Controller
@RequestMapping("/socket")
public class WebSocketController {
/**
* 第一個(gè)用戶(hù)
*
* @param request
* @return
*/
@RequestMapping("/chat1")
public String chat1(HttpServletRequest request) {
// 假設(shè)用戶(hù)tom登錄,存儲(chǔ)到session中
request.getSession().setAttribute("WEBSOCKET_USERNAME", "tom");
return "chat1";
}
/**
* 第二個(gè)用戶(hù)登錄
*
* @param request
* @return
*/
@RequestMapping("/chat2")
public String chat2(HttpServletRequest request) {
// 假設(shè)用戶(hù)jerry登錄,存儲(chǔ)到session中
request.getSession().setAttribute("WEBSOCKET_USERNAME", "jerry");
return "chat2";
}
/**
* 第三個(gè)用戶(hù)登錄
*
* @param request
* @return
*/
@RequestMapping("/chat3")
public String chat3(HttpServletRequest request) {
// 假設(shè)用戶(hù)jack登錄,存儲(chǔ)到session中
request.getSession().setAttribute("WEBSOCKET_USERNAME", "jack");
return "chat3";
}
}
頁(yè)面都是一樣的代碼,分別新建3份,chat1.html,chat2.html,chat3.html。
<!DOCTYPE html>
<html lang="en">
<head>
<title>測(cè)試websocket</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" >
<link rel="stylesheet" >
</head>
<body>
<div class="container">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">用戶(hù)</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>選擇一個(gè)...</option>
</select>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text" id="btn1">發(fā)送給所有人</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text" id="btn2">發(fā)送給單人</span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
<script language=javascript>
$(function () {
var websocket;
if ('WebSocket' in window) {
console.log("WebSocket");
websocket = new WebSocket("ws://localhost:8080/echo");
} else if ('MozWebSocket' in window) {
console.log("MozWebSocket");
websocket = new MozWebSocket("ws://echo");
} else {
console.log("SockJS");
websocket = new SockJS("http://127.0.0.1:8080/sockjs/echo");
}
websocket.onopen = function (evnt) {
console.log("鏈接服務(wù)器成功!", evnt.data);
};
websocket.onmessage = function (evnt) {
console.log('收到消息:', evnt.data);
var json = JSON.parse(evnt.data);
if (json.hasOwnProperty('users')) {
var users = json.users;
for (var i = 0; i < users.length; i++) {
$("#inputGroupSelect01").append('<option value="' + users[i] + '">' + users[i] + '</option>');
}
} else {
//打印消息
toast(json.msg, 'info')
}
};
websocket.onerror = function (evnt) {
};
websocket.onclose = function (evnt) {
console.log("與服務(wù)器斷開(kāi)了鏈接!")
}
$('#btn2').bind('click', function () {
if (websocket != null) {
//根據(jù)勾選的人數(shù)確定是群聊還是單聊
var value = $(this).parent().parent().find('input').val();
//得到選擇的用戶(hù)
var name = $("#inputGroupSelect01").find("option:selected").val();
console.log('選中的用戶(hù)', name);
if (name === '選擇一個(gè)...') {
toast('請(qǐng)選擇一個(gè)用戶(hù)', 'warning')
} else {
var object = {
to: name,
msg: value,
type: 2
};
//將object轉(zhuǎn)成json字符串發(fā)送給服務(wù)端
var json = JSON.stringify(object);
websocket.send(json);
}
} else {
console.log('未與服務(wù)器鏈接.');
}
});
$('#btn1').bind('click', function () {
if (websocket != null) {
//根據(jù)勾選的人數(shù)確定是群聊還是單聊
var value = $(this).parent().parent().find('input').val();
var object = {
msg: value,
type: 1
};
//將object轉(zhuǎn)成json字符串發(fā)送給服務(wù)端
var json = JSON.stringify(object);
websocket.send(json);
} else {
console.log('未與服務(wù)器鏈接.');
}
});
})
function toast(text, icon) {
$.toast({
text: text,
heading: '新消息',
icon: icon,
showHideTransition: 'slide',
allowToastClose: true,
hideAfter: 3000,
stack: 5,
position: 'top-right',
bgColor: '#444444',
textColor: '#eeeeee',
textAlign: 'left',
loader: true,
loaderBg: '#006eff'
});
}
</script>
</body>
</html>
5. 頁(yè)面的支持
修改配置文件,我比較喜歡yml的。所以重命名配置文件為yml格式
application.yml
spring:
####配置 頁(yè)面模板的參數(shù),
freemarker:
charset: utf-8
suffix: .html
content-type: text/html
settings:
##格式化這個(gè)項(xiàng)目中,頁(yè)面數(shù)字的顯示,小數(shù)位數(shù)最多顯示10位
number_format: 0.##########
http:
encoding:
charset: UTF-8
#### 配置靜態(tài)資源的地址。html文件中,可以直接使用/static/目錄
resources:
static-locations: "classpath:/"
6.測(cè)試
服務(wù)跑起來(lái)。
然后瀏覽器打開(kāi)3個(gè)頁(yè)面,分別訪問(wèn):
http://localhost:8080/socket/chat1
http://localhost:8080/socket/chat2
http://localhost:8080/socket/chat3
效果如下:

可以看到最先打開(kāi)的頁(yè)面返回的用戶(hù)信息只有tom,后面的用戶(hù)加入就出現(xiàn)了jerry和jack。
測(cè)試發(fā)送一條群消息

下面查看單人消息,先刷新3個(gè)頁(yè)面,保證都加載了3個(gè)用戶(hù)信息。發(fā)送的時(shí)候選擇另外用戶(hù)推送消息,另外2個(gè)人是收不到消息的。

完整項(xiàng)目 git:git@gitlab.com:tulongx/websocketdemo1.git
以上。