踩坑總結(jié)
因?yàn)橹皬膩?lái)沒(méi)有接觸過(guò)蠢护，所以網(wǎng)上找了很多教程最后發(fā)現(xiàn)都不怎么完整，大多數(shù)都是直接全盤(pán)照抄《Spring Boot》一書(shū)中的相關(guān)示例，沒(méi)有做任何修改关带，沒(méi)有說(shuō)明為什么一定要用spring security，而下面的教程自己也是踩了不少坑沼撕，如前后分離中session一直獲取不到宋雏，導(dǎo)致無(wú)法鏈接上，uid不可為中文端朵，websocket自帶協(xié)議和服務(wù)好芭，導(dǎo)致前后端分離一直報(bào)跨域的錯(cuò)誤等等。當(dāng)然websocket一些解釋在這邊就不多說(shuō)了冲呢，相信你已經(jīng)看了很多教程了舍败，我們就直接上配置教程
前端配置
前端配置相對(duì)比較簡(jiǎn)單，主要就是websocket服務(wù)的注冊(cè)敬拓，消息的發(fā)送和接收邻薯。比較關(guān)鍵的點(diǎn)：uid的定義。
// 用戶的特殊標(biāo)志乘凸，一般用id或者生成的uuid厕诡，后臺(tái)為L(zhǎng)ong，不可帶有中文营勤，并且這些值如果從session中獲取灵嫌，需要注意前后端分離帶來(lái)的session壹罚，否則會(huì)報(bào)錯(cuò),這些參數(shù)主要對(duì)應(yīng)著后臺(tái)的message類，用于信息的發(fā)送
let from = '';
let fromName = '';
let to = 5521;
let host = window.location.host;
let webSocket = "";
// 不同的瀏覽器對(duì)websocket的支持不同
if ('WebSocket' in window) {
// 最關(guān)鍵的點(diǎn)寿羞，ws必須加上猖凛，不可用http，因?yàn)閮烧叩膮f(xié)議是不同的绪穆，websocket有自帶的請(qǐng)求協(xié)議辨泳，uid是為了將用戶的id注冊(cè)到websocket的服務(wù)中
webSocket = new WebSocket("ws://127.0.0.1:8090/ws?uid=" + from);
} else if ('MozWebSocket' in window) {
webSocket = new MozWebSocket("ws://" + host + "/ws" + from);
} else {
webSocket = new SockJS("ws://" + host + "/ws/sockjs" + from);
}
// 鏈接，錯(cuò)誤玖院，關(guān)閉菠红，收到消息相關(guān)的回掉函數(shù)
webSocket.onopen = function (event) {
console.log("WebSocket:已連接");
};
webSocket.onerror = function (event) {
console.log("WebSocket:發(fā)生錯(cuò)誤 ");
console.log(event);
};
webSocket.onclose = function (event) {
console.log("WebSocket:已關(guān)閉");
console.log(event);
};
webSocket.onmessage = function (event) {
// 接收到的消息的對(duì)象
let data = JSON.parse(event.data);
};
// 發(fā)送消息的實(shí)例
function sendMsg() {
let data = {};
data["from"] = from;
data["fromName"] = fromName;
data["to"] = to;
data["text"] = "我發(fā)給你一條信息";
webSocket.send(JSON.stringify(data));
}
后端配置
先添加maven相關(guān)依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.2.2</version>
</dependency>
-
注冊(cè)websocket服務(wù)（前端鏈接的url地址）
import javax.annotation.Resource;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/**
* 描述:
* WebScoket配置處理器
*
* @author Msater Zg
* @create 2018-01-24 10:49
*/
@Component
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
/**
* 后臺(tái)寫(xiě)好服務(wù)，項(xiàng)目啟動(dòng)的時(shí)候难菌，注冊(cè)好這兩個(gè)服務(wù)试溯，以供前臺(tái)調(diào)用
*/
@Resource
MyWebSocketHandler handler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// 鏈接的時(shí)候，websocket會(huì)自己增加同源檢測(cè)的功能扔傅，需要單獨(dú)配置是否允許跨域耍共，我配置*代表允許所有的ip進(jìn)行調(diào)用。
registry.addHandler(handler, "/ws").addInterceptors(new HandShake()).setAllowedOrigins("*");
registry.addHandler(handler, "/ws/sockjs").addInterceptors(new HandShake()).setAllowedOrigins("*").withSockJS();
}
}
-
握手之前的配置（需要將用戶相關(guān)uid注冊(cè)到WebSocketSession中猎塞，而這個(gè)uid你可以用token试读，session等等來(lái)代替，因?yàn)槭乔岸朔蛛x荠耽，所以我直接用了用戶的id）
import java.util.Map;
import javax.servlet.http.HttpSession;
import org.springframework.http.HttpHeaders;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;
/**
* 描述:
* Socket建立連接（握手）和斷開(kāi)
*
* @author Msater Zg
* @create 2018-01-24 10:49
*/
public class HandShake implements HandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
Map<String, Object> attributes) throws Exception {
/**
* websocket系統(tǒng)啟動(dòng)連接程序钩骇，啟動(dòng)的時(shí)候就會(huì)把他的session值傳過(guò)來(lái)，放入到websocketsession（websocket的一個(gè)內(nèi)置服務(wù)器）里面
*/
ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
Long uid = Long.parseLong(servletRequest.getServletRequest().getParameter("uid"));
if (uid != 0) {
attributes.put("uid", uid);
} else {
return false;
}
return true;
}
@Override
public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
Exception exception) {
}
}
-
消息推送的相關(guān)的后臺(tái)的方法
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
/**
* 描述:
* Socket處理器(包括發(fā)送信息铝量，接收信息倘屹，信息錯(cuò)誤等方法。)
*
* @author Msater Zg
* @create 2018-01-24 10:49
*/
@Component
public class MyWebSocketHandler implements WebSocketHandler {
/**
* 最重要的websocket處理程序（包括發(fā)送信息慢叨，接收信息纽匙，信息錯(cuò)誤等方法。）
*/
/**
* 先注冊(cè)一個(gè)websocket服務(wù)器拍谐，將連接上的所有用戶放進(jìn)去
*/
public static final Map<Long, WebSocketSession> USER_SOCKET_SESSION_MAP;
static {
USER_SOCKET_SESSION_MAP = new HashMap<Long, WebSocketSession>();
}
/**
* 前臺(tái)連接并且注冊(cè)了賬戶
*/
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
Long uid = (Long) session.getAttributes().get("uid");
if (USER_SOCKET_SESSION_MAP.get(uid) == null) {
USER_SOCKET_SESSION_MAP.put(uid, session);
}
}
@Override
public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
if (message.getPayloadLength() == 0) {
return;
}
NotificationMessage msg = new Gson().fromJson(message.getPayload().toString(), NotificationMessage.class);
msg.setDate(new Date());
sendMessageToUser(msg.getTo(), new TextMessage(new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create().toJson(msg)));
}
/**
* 消息傳輸錯(cuò)誤處理烛缔，如果出現(xiàn)錯(cuò)誤直接斷開(kāi)連接
*/
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
if (session.isOpen()) {
session.close();
}
removeWebSocketUser(session);
}
/**
* 關(guān)閉連接后
*/
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
System.out.println("Websocket:" + session.getId() + "已經(jīng)關(guān)閉");
removeWebSocketUser(session);
}
@Override
public boolean supportsPartialMessages() {
return false;
}
/**
* 給所有在線用戶發(fā)送消息
*
* @param message
* @throws IOException
*/
public void broadcast(final TextMessage message) throws IOException {
Iterator<Entry<Long, WebSocketSession>> it = USER_SOCKET_SESSION_MAP.entrySet().iterator();
// 多線程群發(fā)（給所有在線的用戶發(fā)送消息） 先判斷是否里面有用戶（）然后循環(huán)發(fā)消息
/*后臺(tái)調(diào)用sendMessage方法的時(shí)候，前臺(tái)會(huì)觸發(fā)onmessage*/
while (it.hasNext()) {
final Entry<Long, WebSocketSession> entry = it.next();
if (entry.getValue().isOpen()) {
new Thread(new Runnable() {
@Override
public void run() {
try {
if (entry.getValue().isOpen()) {
entry.getValue().sendMessage(message);
}
} catch (IOException e) {
e.printStackTrace();
}
}
}).start();
}
}
}
/**
* 單個(gè)用戶發(fā)消息
*
* @param message
* @throws IOException
*/
public void sendMessageToUser(Long uid, TextMessage message) throws IOException {
//根據(jù)傳過(guò)來(lái)的賬號(hào)轩拨，在websocketseesion的服務(wù)器里面找践瓷，接收者注冊(cè)的賬號(hào)
WebSocketSession session = USER_SOCKET_SESSION_MAP.get(uid);
if (session != null && session.isOpen()) {
session.sendMessage(message);
}
}
public void removeWebSocketUser(WebSocketSession session) {
Iterator<Entry<Long, WebSocketSession>> it = USER_SOCKET_SESSION_MAP.entrySet().iterator();
// 移除Socket會(huì)話
while (it.hasNext()) {
Entry<Long, WebSocketSession> entry = it.next();
if (entry.getValue().getId().equals(session.getId())) {
USER_SOCKET_SESSION_MAP.remove(entry.getKey());
break;
}
}
}
}
-
消息類（可根據(jù)不同的需求進(jìn)行修改）
import java.util.Date;
/**
* 描述:
* 消息類
*
* @author Msater Zg
* @create 2018-02-24 10:49
*/
public class NotificationMessage {
/**
* 發(fā)送者賬號(hào)
*/
public Long from;
/**
* 發(fā)送者名稱
*/
public String fromName;
/**
* 接收者賬號(hào)
*/
public Long to;
/**
* 發(fā)送的內(nèi)容
*/
public String text;
/**
* 發(fā)送的日期
*/
public Date date;
public Long getFrom() {
return from;
}
public void setFrom(Long from) {
this.from = from;
}
public Long getTo() {
return to;
}
public void setTo(Long to) {
this.to = to;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getFromName() {
return fromName;
}
public void setFromName(String fromName) {
this.fromName = fromName;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
}
后續(xù)
大致原理就是后臺(tái)啟動(dòng)websocket服務(wù)，前端用戶注冊(cè)并在websocket自帶session服務(wù)中放這兒值亡蓉，而后續(xù)的消息發(fā)送晕翠，就是給websocketsession中的用戶發(fā)送消息，然后前端進(jìn)行響應(yīng)砍濒，以上都是自己一些看法淋肾，有什么問(wèn)題還希望指出
