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