SpringBootでWebSocketを使う
3713 ワード
プロセス全体は次のとおりです.
1.依存の追加
2.注入サーバEndpointExporter
3.WebSocketインタフェースの作成
4.ビジネスで呼び出す
5.フロントエンドjs
以下から開始します.
1.依存の追加
2.注入サーバEndpointExporter
3.WebSocketインタフェースの作成
4.ビジネスで呼び出す
5.フロントエンドjs
ここではhttpsを使っているのでwebsocketはwssです.
1.依存の追加
2.注入サーバEndpointExporter
3.WebSocketインタフェースの作成
4.ビジネスで呼び出す
5.フロントエンドjs
以下から開始します.
1.依存の追加
org.springframework.boot
spring-boot-starter-websocket
2.注入サーバEndpointExporter
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
3.WebSocketインタフェースの作成
import lombok.extern.apachecommons.CommonsLog;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
@Component
@CommonsLog
@ServerEndpoint("/websocket")
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this);
log.info(" , :" + webSocketSet.size());
}
@OnClose
public void onClose(){
webSocketSet.remove(this);
log.info(" , :" + webSocketSet.size());
}
@OnMessage
public void onMessage(String message){
log.info(" :" + message);
}
public void sendMessage(String message){
for(WebSocket webSocket : webSocketSet){
log.info(" :" + message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (IOException e){
log.error(e.fillInStackTrace());
}
}
}
}
4.ビジネスで呼び出す
@Autowired
private WebSocket webSocket;
...
webSocket.sendMessage("new-order");
5.フロントエンドjs
//
var myAuto = document.getElementById('order_audio');
var websocket = null;
if('WebSocket' in window){
websocket = new WebSocket('wss://xxxx.com/websocket');
} else {
alert(' websocket');
}
// ,
var heartCheck = {
timeout: 60000,//60s
timeoutObj: null,
reset: function(){
clearInterval(this.timeoutObj);
this.start();
},
start: function(){
this.timeoutObj = setInterval(function(){
if(websocket.readyState==1){
websocket.send("HeartBeat");
}
}, this.timeout)
}
};
websocket.onopen = function (ev) {
console.log(" ");
heartCheck.start();
}
websocket.onclose = function (ev) {
console.log(" ");
if (ev.code != 4500) {
reconnect();
}
}
websocket.onmessage = function (ev) {
console.log(" :" + ev.data);
heartCheck.reset();
if(ev.data=='new-order'){
//
myAuto.play();
}
}
websocket.onerror = function (ev) {
console.log(" ");
}
window.onbeforeunload = function (ev) {
websocket.close();
}
}
ここではhttpsを使っているのでwebsocketはwssです.