
Java | Maven | Tomcat | w3HexSchool
初探 WebSocket
WebSocket 的話就比較不一樣,我們就沒有用到 Servlet API 了,取而代之的是 javax.websocket 這包
廢話不多說,直接開始吧!
首先!我們要先下載 websocket 的相依性 ( 這次專案要裝的相依性也就僅此爾爾 )
<dependency> <groupId>javax.websocket</groupId> <artifactId>javax.websocket-api</artifactId> <version>1.1</version> </dependency>
@ServerEndpoint("/websocket") public class WebSocketServer { @OnMessage public void onMessage(String message, Session session) throws IOException, InterruptedException { System.out.println("從您的網頁收到一封訊息: 「" + message + "」"); } @OnOpen public void onOpen() { System.out.println("與客戶端建立連線了!"); } @OnClose public void onClose() { System.out.println("連線關閉!"); } @OnError public void onError(Session session, Throwable t) { System.out.println("連線發生錯誤!"); } }
在我們的 WebSocket 中,是使用 @ServerEndpoint() 這個標註來註記他為 WebSocket 服務,裡面的參數當然就是指定訪問 url 的位置了!
在我們的物件中 分別又有四個事件
- @OnOpen – 當與客戶端連線建立
- @OnClose – 當客戶端取消連線
- @OnError – 發生錯誤
- @OnMessage – 客戶端傳送訊息過來
其中分別是 @OnError 與 @OnMessage 會收到 Session 物件 (也就是會話物件)
透過這個 Session 物件,我們就可以與客戶端進行溝通。
可以是取得一些客戶端的基本查詢資訊,亦或是推送訊息給客戶端、關閉會話 等等…
那知道這些之後,來個簡單的範例吧!
public class WebSocketServer { @OnMessage public void onMessage(String message, Session session) throws IOException, InterruptedException { session.getBasicRemote().sendText("從您的網頁收到一封訊息: 「" + message + "」"); int sendMessages = 0; while (sendMessages < 10) { Thread.sleep(500);; sendMessages++; session.getBasicRemote().sendText( "伺服器推送第 " + sendMessages + " 筆訊息" ); } session.getBasicRemote().sendText("這是伺服器推送的最後一筆訊息 要再收到伺服起的訊息就再敲我一下吧!!"); // session.close(); // 關閉會話 } @OnOpen public void onOpen() { System.out.println("與客戶端建立連線了!"); } @OnClose public void onClose() { System.out.println("連線關閉!"); } @OnError public void onError(Session session, Throwable t) { System.out.println("連線發生錯誤!"); } }
阿如果前面的 Tomcat 環境忘了怎麽建議可以參考這篇唷!「Tomcat + Servlet + IntelliJ」
阿!還有簡單的 Vue 前端程式碼,也可以參考一下
<template> <div id="app"> <h2>伺服器回應訊息:</h2> <div class="resp-box"> <p v-for="(respMsg, index) in respMsgArr" :key="index"> {{respMsg}} </p> </div> <input type="text" v-model="msg"> <button @click="sendMsg">送出訊息</button> </div> </template> <script> export default { name: 'App', created () { this.subWebSocket() }, data () { return { mySocket: null, msg: '', // 傳給伺服器的訊息 respMsgArr: [] // 伺服器回應過的訊息 } }, methods: { subWebSocket () { console.log('連線中...') this.mySocket = new WebSocket('ws://localhost:8080/web-socket/websocket') // 註冊事件 this.mySocket.onopen = () => this.onOpen() this.mySocket.onerror = () => this.onError() this.mySocket.onmessage = (msg) => this.onMessage(msg) }, /** * 連線成功事件 */ onOpen () { console.log('連線成功') }, /** * 連線失敗事件 */ onError () { console.log('連結失敗') }, /** * 接受到伺服器訊息 */ onMessage (msg) { this.respMsgArr.push(msg.data) }, sendMsg () { this.mySocket.send(this.msg) } } } </script> <style> .resp-box { padding: 10px; border: 1px solid black; } </style>
No Comment