介绍
最近终于收到一个面试通知:
面试官:巴拉巴巴……
我:巴拉巴拉……
面试官:你用过 WebSocket 吗?
我:Emma……以前了解过,但是没有使用过,不过我近期准备给自己做的简历增加一个市场,当有用户新增简历推送时,在浏览简历市场的用户就可以收到提示。
实现效果
预览
在线
实现步骤
以前记得在 菜鸟教程 上看过 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 你画我猜的小游戏。
相关链接:
求职
请问有公司收切图仔吗?