socket应用(vue、node.js、M站)
前言：我们在做一些项目的时候需要做到实时变化，
比如我们有时候有需求会要求我们做一个类似于聊天室的页面
比如有些时候我们对某些东西进行点赞和刷票，需要实时显示出来
如果我们设置定时刷新内容，是一个比较不合适的事情(定时请求接口对性能会造成影响)，所以我们需要socket来为我们提供实时性
Node.js与socket
我这个小项目是用Node自己给自己写的后台，使用了socket.io
首先启动一个socket服务
const server = require('http').createServer(()=>{
res.end('')
})
var io = require('socket.io')(server);
server.listen(9002)
//这个socket.io就是我们要使用的插件，
//随便你npm、cnpm还是yarn，把它给加进来
//这个9002是端口号，特指socket的端口号，不要与Node的端口号重复
明确需求触发socket
这个明确需求是什么意思呢，就是现在我们与socket已经建立链接了，那么我们在什么情况下触发socket？
比如我做个这个点赞，就是在用户触发点赞接口的时候，要触发socket
router.post('/updateZan', async (req, res) => {
//...省略内部操作
io.emit('msg','update')
})
//其实重点只有最后一句，那就是io.emit
//仔细看看像不像vue 的eventHub
//前面的msg是为这次的socket服务起的名字，
//后面的update就是这次的socket服务要向前端传输的内容
如此，Node.js这里就结束了
让我们镜头一转，看向前端需要哪些操作呢
Vue与socket
vue搭配socket更是方便的不行，因为vue有很多现成的插件
从main.js开始
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
//这两个都是插件，给我安排上 Vue.use(VueSocketio, socketio('http://localhost:9002/'));//与websocket服务端链接 new Vue({
router,
store,
sockets: {
connect: function () {
console.log('socket connected');
}
},
render: h => h(App)
}).$mount('#app') //还记得我刚刚提醒你们的端口号么，这里不要写错了
这里有个小坑坑，我刚开始只要main.js写成以上这样就会报错
TypeError: Cannot call a class as a function
解决方法：是安装的包版本不太行(具体原因我也不清楚)
把node_modules删掉，在package.json中把vue-socket.io版本改成"vue-socket.io": "^2.1.1-a"
然后重新install
解决
具体的.vue里
与data、methods同级的地方
sockets:{ //在此接收又服务器发送过来的数据 ps：注意此处的方法名要与服务器的发送的事件保持一致才能接收到
msg: function (val) {
console.log('接收到服务端消息1111', val);
this.getContent()
this.getCommit()
}
},
//还记得msg么，我刚刚起的名字，每当这个时候我就重新调取赞的数量接口，如此就实现了我所需要的实时
m站与socket
m站的原理也是：与后台的socket进行端口号绑定，并且当触发msg事件时，进行操作(我这里是页面强制刷新)
如果有对聊天室特别感兴趣的同学
这里有一份我百度的时候找到的大佬的代码，
并且附上大佬的链接，
代码在这个链接里有一个如何运行实例，点击下载源码即可。
可以参考
以上。