socket應用(vue、node.js、M站)

socket應用(vue、node.js、M站)

 

前言：我們在做一些項目的時候需要做到實時變化，

比如我們有時候有需求會要求我們做一個類似於聊天室的頁面

比如有些時候我們對某些東西進行點贊和刷票，需要實時顯示出來

如果我們設置定時刷新內容，是一個比較不合適的事情(定時請求接口對性能會造成影響)，所以我們需要socket來為我們提供實時性

 

 

 

Node.js與socket

我這個小項目是用Node自己給自己寫的后台，使用了socket.io

首先啟動一個socket服務

const server = require('http').createServer(()=>{
    res.end('111')
})
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事件時，進行操作(我這里是頁面強制刷新)

 

 

 

如果有對聊天室特別感興趣的同學

這里有一份我百度的時候找到的大佬的代碼，

並且附上大佬的鏈接，

代碼在這個鏈接里有一個如何運行實例，點擊下載源碼即可。

可以參考 

 

 

以上。