初探 WebSocket

初探 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>

wayne

No Comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

文章分類