【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>
复制代码