【Vue 實踐】增長簡歷市場及 WebSocket 通知-02

介紹

最近終於收到一個面試通知：

面試官：巴拉巴巴……

我：巴拉巴拉……

面試官：你用過 WebSocket 嗎？

我：Emma……之前瞭解過，可是沒有使用過，不過我近期準備給本身作的簡歷增長一個市場，當有用戶新增簡歷推送時，在瀏覽簡歷市場的用戶就能夠收到提示。

實現效果

預覽

在線

1. 源碼地址
2. 簡歷市場
3. 我的簡歷

實現步驟

之前記得在 菜鳥教程 上看過 WebSocket 示範，繼續回顧一下，能夠發現實現一個簡單的 WebSocket 很容易。

1. 後端

首先須要一個 WebSocket 的後端服務：

const WebSocket = require("ws");

const PORT = process.env.PORT || 3175;
const server = new WebSocket.Server({ port: PORT });

let socketSet = [];

server.on("connection", (websocket, req, res) => {
  const userId = req.url.split("/");

  let isOnline = false;
  socketSet.forEach(ws => {
    if (ws.user == userId[1]) isOnline = true;
  });
  if (!isOnline) {
    socketSet.push({
      websocket: websocket,
      user: userId[1]
    });
  }

  websocket.on("message", function incoming(message) {
    const { updateMarket, author } = JSON.parse(message);
    if (updateMarket) {
      socketSet.forEach(ws => {
        if (ws.websocket.readyState == 1) {
          ws.websocket.send(
            JSON.stringify({
              msg: '簡歷市場已更新',
              updateMarket,
              author
            })
          );
        }
      });
    }
  });
});
複製代碼

能夠將鏈接進來的用戶 push 到數組中，便於用戶管理，有了數組天然就能夠很容易找到對應的用戶實現聊天了，不過此處僅須要實現通知便可。

當從客戶端收到的消息中 updateMarket 時即向在先的用戶進行廣播，通知有新的簡歷。

2. 前端

有不少頁面須要實現 WebSocket，因此要封裝一個服務：

export default {
  // 保證整個項目只有一個socket實例
  ws: null,
  init(config, onMessage, onError) {
    if (!this.ws) {
      // 實例化
      this.ws = new WebSocket(`ws://47.112.26.219:3175/${config.timestamp}`);
    }

    this.ws.onmessage = event => {
      let message = JSON.parse(event.data);
      onMessage && onMessage(message);
    };

    this.ws.onerror = error => {
      onError && onError(error);
    };

    this.ws.onclose = () => {
      this.ws = null;
    };
  },
  send(msg) {
    this.ws.send(JSON.stringify(msg));
  }
};
複製代碼

3. 推送消息

首先須要完成簡歷發起的通知，也就是須要在分享簡歷時向 WebSocket 服務推送消息：

<script>
export default {
  mounted() {
    const timestamp = new Date().getTime();
    WS.init({ timestamp });
  },
  methods: {
    displayResume() {
      WS.send(msg);
    }
  }
}
</script>
複製代碼

4. 接收消息

進入 market 時會連入 WebSocket 服務，同時監聽是否有新消息的通知：

<script>
export default {
  mounted() {
    WS.init(
      { timestamp },
      message => {
        this.newResume.push({
          msg: message.msg
        });
      },
      error => {
        // eslint-disable-next-line no-console
        console.log(error);
      }
    );
  }
}
</script>
複製代碼

最後

總共花了大半天的時間終於搞好這個了，感受 WebSocket 仍是頗有意思的。以後能夠玩一點 canvas 你畫我猜的小遊戲。

相關連接：

1. 【Vue 實踐】頁面生成 pdf 文件-01

求職

請問有公司收切圖仔嗎？