數字貨币交易系統、線上文檔多人編輯、線上客服系統都要用的技術

一、WebSocket概述

WebSocket是一種在單個TCP連接配接上進行全雙工通信的協定，使得用戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向用戶端推送資料，在WebSocket API中，浏覽器和伺服器隻需要完成一次握手，兩者之間就直接可以建立持久性的連結，并進行雙向資料傳輸

在WebSocket出現之前，我們想要擷取服務端的資料隻能通過用戶端向服務端發送請求，但是如果當服務端響應資料，用戶端想要實時的更新，我們采用的是Ajax輪詢，但是非常浪費資源和降低性能，并且不能真正的實時重新整理，WebSocket可以解決這個問題

二、WebSocket使用

1、Express服務端

安裝依賴

npm i socket.io

           

project/ws.js

const express = require("express");

const app = express();
//執行個體化WebSocket對象
let ws = require("http").Server(app);

var io = require("socket.io")(ws);
//監聽端口
server.listen(3000, () => {
  console.log("伺服器已連接配接");
});

// 監聽connection
// 如果有用戶端進行連接配接，那麼會監聽
io.on("connection", function (socket) {
    console.log("建立連接配接......");
    // 監聽handler
    // 當用戶端觸發了handler事件，那麼會監聽到
    /* socket.on("handler", function (data) {
      console.log(data); // 你好，我是用戶端的資料
    }); */
    
    // 觸發show事件并且傳遞資料
    // show是用戶端方法
    socket.emit("clientHandler","你好，我是服務端資料");
  });
           

2、Vue2用戶端

安裝依賴

npm i vue-socket.io socket.io-client
           

注冊WebSocket

project/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import SocketIO from 'vue-socket.io';
import ClientSocketIO from 'socket.io-client';

Vue.use(
  new SocketIO({
    debug:false,
    connection:ClientSocketIO.connect("ws://localhost:3000",{
      transports:["websocket"],
      autoConnect:false // 預設不建立連接配接
    })
  })
);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
           

元件中使用WebSocket

project/src/views/WebSocket.vue

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    // 建立連接配接 
    this.$socket.open();
    // 觸發服務端handler事件并傳遞資料
    this.$socket.emit("handler", "你好，我是用戶端的資料");
  },

  methods: {
   
  },
  sockets: {
    connecting() {
      console.log("正在連接配接...");
    },
    connect_error() {
      console.log("連接配接失敗");
    },
    clientHandler(params) {
      this.msg= params; // 你好，我是服務端資料
    },
  },
};
</script>

<style lang="scss" scoped></style>