年会开发日记03 - WebSocket长连接获取微信签到用户信息

接着 年会开发日记 01 的签到墙,
里边用到了 WebSocket 来实现用户微信扫码签到,然后后端推送签到用户信息到前端,
前端收到数据之后创建元素添加到 3D 墙中。

本来是想直接自己写的,但是有后来又加入了礼品活跃气氛,就要用到用户列表的展示和抽取过程中的随机效果,虽然哪些人获奖是后台返回给我的。
所以这些用户信息需要在多组件内共用,那我就懒得自己写了,就去找了 Vue 的组件库了。

参与用户

展示界面

抽奖效果

抽取过程中

所以在 Awesome Vue 中了找了一些关于 Websocket 的插件

其中 vue-socket.io 和 vue-websocket 是基于 socket.io 的所以需要后端也是 Socket.io 遂放弃,不然会连接上之后会请求服务端的 login 方法,如果服务端不是的话,会不断轮询。

vue-native-websocket

顾名思义,就是原生的 WebSocket,并且可以使用 Vuex

native websocket implementation for Vuejs 2 and Vuex

安装依赖以后,简单配置一下就可以使用了。

1
2
import VueNativeSock from "vue-native-websocket";
Vue.use(VueNativeSock, "ws://localhost:9090");

也可以启动 Vuex

1
2
3
import VueNativeSock from "vue-native-websocket";
import store from "./store";
Vue.use(VueNativeSock, "ws://localhost:9090", { store: store });

具体可以看作者写的说明文档,怎么在 Vue 实例中使用和怎么配合 Vuex 和一些基础事件函数