溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了springboot+vue如何實現websocket配置，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
1.引入依賴
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>1.3.5.RELEASE</version> </dependency>
2.配置ServerEndpointExporter
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint。
3.創建websocket的ServerEndpoint端點
@Component
@ServerEndpoint("/socket")
public class WebSocketServer {
/**
* 全部在線會話
*/
private static Map<String, Session> onlineSessions = new ConcurrentHashMap<>();
/**
* 當客戶端打開連接：1.添加會話對象 2.更新在線人數
*/
@OnOpen
public void onOpen(Session session) {
onlineSessions.put(session.getId(), session);
}
/**
* 當客戶端發送消息：1.獲取它的用戶名和消息 2.發送消息給所有人
* <p>
* PS: 這里約定傳遞的消息為JSON字符串 方便傳遞更多參數！
*/
@OnMessage
public void onMessage(Session session, String jsonStr) {
}
/**
* 當關閉連接：1.移除會話對象 2.更新在線人數
*/
@OnClose
public void onClose(Session session) {
onlineSessions.remove(session.getId());
}
/**
* 當通信發生異常：打印錯誤日志
*/
@OnError
public void onError(Session session, Throwable error) {
error.printStackTrace();
}
/**
* 公共方法：發送信息給所有人
*/
public void sendMessageToAll(String jsonMsg) {
onlineSessions.forEach((id, session) -> {
try {
session.getBasicRemote().sendText(jsonMsg);
} catch (IOException e) {
e.printStackTrace();
}
});
}
}4.前端配置連接與接收消息
<script>
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 默認主題
Vue.use(ElementUI, {size: 'small'});
import '@/directives/directives.js'
import Locale from '@/mixins/locale';
import { t } from '@/locale';
/**
* WebSocket客戶端
*
* 使用說明：
* 1、WebSocket客戶端通過回調函數來接收服務端消息。例如：webSocket.onmessage
* 2、WebSocket客戶端通過send方法來發送消息給服務端。例如：webSocket.send();
*/
function getWebSocket() {
/**
* WebSocket客戶端 PS：URL開頭表示WebSocket協議 中間是域名端口 結尾是服務端映射地址
*/
var webSocket = new WebSocket('ws://10.10.10.3:9117/socket');//建立與服務端的連接
/**
* 當服務端打開連接
*/
webSocket.onopen = function (event) {
console.log('WebSocket打開連接');
};
/**
* 當服務端發來消息：1.廣播消息 2.更新在線人數
*/
webSocket.onmessage = function (event) {
console.log(event)
console.log('WebSocket收到消息：%c' + event.data, 'color:green');
//獲取服務端消息
var message = JSON.parse(event.data) || {};
console.log(message)//
};
/**
* 關閉連接
*/
webSocket.onclose = function (event) {
console.log('WebSocket關閉連接');
};
/**
* 通信失敗
*/
webSocket.onerror = function (event) {
console.log('WebSocket發生異常');
};
return webSocket;
}
var webSocket = getWebSocket();
/**
* 通過WebSocket對象發送消息給服務端
* 此處沒有主動發消息給服務端，如果調用此方法，則會發送消息至socket服務端onMessage()方法上
*/
function sendMsgToServer() {
var $message = $('#msg');
if ($message.val()) {
webSocket.send(JSON.stringify({username: $('#username').text(), msg: $message.val()}));
$message.val(null);
}
}
export default {
}5.實現后端推送消息至瀏覽器端
@Autowired
private WebSocketServer webSocketServer;//注入socket服務
@Override
public PuStatesResult queryPuStateUseInfo(QueryCondition condition) {
String sql = condition.generatorSql();
if(sql == null){
return null;
}
List<PuState> puStateList = null;
puStateList = puStateMapper.getPusBySql(sql);
if(puStateList == null || puStateList.size() == 0){
return null;
}
PuStatesResult result = new PuStatesResult();
result.setPuStateList(puStateList);
result.computePuStates();
if(false == condition.isWithDetail()){
result.setPuStateList(null);
}
//todo
Gson gson = new Gson();
String json = gson.toJson(result);
webSocketServer.sendMessageToAll(json);//調用第3節中的方法
return result;
}此處是前端查詢時，服務器將一些數據發送至前端，假如我們在實現有些前端數據顯示的時候，當查詢一次后，如果沒有斷開連接，希望后端數據更新后，前端能接收最近數據。那么可以在數據更新接口中，調用自己實現的socket服務端邏輯，推送消息至服務端，然后由服務端監聽，并更新數據
看完上述內容，是不是對springboot+vue如何實現websocket配置有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
