1.首次接觸websocket，花了一天多的時間尋找相關資料，參考了網路上的相關例子（https://www.cnblogs.com/qilin-3611/p/7054270.html），整理出一個簡單前端、後臺demo，後臺demo直接使用連結中的文章的demo，下載後部署在8.0以上的tomcat，jdk為1.8

此處給出簡單的前端程式碼：

<!-- readyState表示連線有四種狀態：
CONNECTING (0)：表示還沒建立連線；
OPEN (1)： 已經建立連線，可以進行通訊；
CLOSING (2)：通過關閉握手，正在關閉連線；
CLOSED (3)：連線已經關閉或無法開啟； -->
<template>
  <div>
    <input type="text" v-model="text">
    <button @click="send()">傳送訊息</button>
    <br>
    <button @click="closeWebSocket()">關閉websocket連線</button>
    <br>
    <div>{{data}}</div>
  </div>
</template>
<script>
export default {
  name: "WebSocket",
  components: {

  },
  data() {
    return {
      text: '',
      data: '',
      websocket: null
    }
  },
  mounted() {
    if ('WebSocket' in window) {
      this.websocket = new WebSocket('ws://localhost:8080/JavaWebSocket/websocket')
      this.initWebSocket()
    } else {
      alert('當前瀏覽器 Not support websocket')
    }
  },
  beforeDestroy() {
    this.onbeforeunload()
  },
  methods: {
    initWebSocket() {
      //連線錯誤
      this.websocket.onerror = this.setErrorMessage

      // //連線成功
      this.websocket.onopen = this.setOnopenMessage

      //收到訊息的回撥
      this.websocket.onmessage = this.setOnmessageMessage

      //連線關閉的回撥
      this.websocket.onclose = this.setOncloseMessage

      //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。
      window.onbeforeunload = this.onbeforeunload
    },
    setErrorMessage() {
      this.data = "WebSocket連線發生錯誤" + '   狀態碼：' + this.websocket.readyState;
    },
    setOnopenMessage() {
      this.data = "WebSocket連線成功" + '   狀態碼：' + this.websocket.readyState;
    },
    setOnmessageMessage(event) {
      this.data = '服務端返回：' + event.data;
    },
    setOncloseMessage() {
      this.data = "WebSocket連線關閉" + '   狀態碼：' + this.websocket.readyState;
    },
    onbeforeunload() {
      this.closeWebSocket();
    },

    //websocket傳送訊息
    send() {
      this.websocket.send(this.text)
      this.text = ''
    },
    closeWebSocket() {
      this.websocket.close()
    }
  }
}

</script>
<style scoped>
</style>
 

以上程式碼使用不同瀏覽器開啟，輸入任意文字後，後臺會返回所輸入的文字到所有已經連線的瀏覽器，demo非常簡陋，目的在於瞭解websocket的簡單概念與簡單使用，後續還會深入研究wss的使用