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

shanyuhai123發表於2019-04-07
VueWeb

介紹

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

面試官：巴拉巴巴……

我：巴拉巴拉……

面試官：你用過 WebSocket 嗎？

我：Emma……以前瞭解過，但是沒有使用過，不過我近期準備給自己做的簡歷增加一個市場，當有使用者新增簡歷推送時，在瀏覽簡歷市場的使用者就可以收到提示。

實現效果

預覽

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

線上

  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

求職

請問有公司收切圖仔嗎？

相關文章