前言：前端與后端交互時(shí)缓待，一般都使用ajax蚓耽，但ajax無(wú)法實(shí)時(shí)獲取更新的數(shù)據(jù)，采用輪詢方式開銷會(huì)非常大,且后端也無(wú)法主動(dòng)推送數(shù)據(jù)給前端旋炒。vue提供了socket.io來(lái)解決這個(gè)問題步悠，一旦數(shù)據(jù)進(jìn)行更新，服務(wù)端可主動(dòng)將數(shù)據(jù)推送至客戶端瘫镇，常用于消息類推送的場(chǎng)景中鼎兽。
socket.io的github地址：https://github.com/MetinSeylan/Vue-Socket.io
一、關(guān)于socket通信的簡(jiǎn)單說(shuō)明
Socket是在應(yīng)用層和傳輸層之間的一個(gè)抽象層汇四，它把TCP/IP層復(fù)雜的操作抽象為幾個(gè)簡(jiǎn)單的接口接奈，供應(yīng)用層調(diào)用實(shí)現(xiàn)進(jìn)程在網(wǎng)絡(luò)中的通信（來(lái)源百科）。它是一種全雙工（服務(wù)端與客戶端可同時(shí)收發(fā)消息）通信通孽，當(dāng)有數(shù)據(jù)更新時(shí)服務(wù)端可以主動(dòng)的將消息推送到客戶端序宦。
Socket通信的運(yùn)行流程如下：
1、服務(wù)端啟動(dòng)Socket監(jiān)聽端口背苦，監(jiān)聽是否有客戶端連接進(jìn)來(lái)互捌，即Watch Socket潘明；
2、客戶端通過http協(xié)議發(fā)送請(qǐng)求報(bào)文秕噪，服務(wù)端響應(yīng)請(qǐng)求后會(huì)將協(xié)議升級(jí)為WebSocket钳降，并創(chuàng)建一個(gè)新的Socket對(duì)象，客戶端Socket隨即與服務(wù)端Socket進(jìn)行連接和通信腌巾，且客戶端不再與Watch Socket通信遂填；
3、Watch Socket繼續(xù)監(jiān)聽是否有其它客戶端連接澈蝙。
二吓坚、安裝依賴
npm install vue-socket.io --save
npm install?socket.io-client --save
三、在全局中引入組件
在main.js中引入
import?SocketIO?from?"socket.io-client"
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
? ? ? debug: true,
? ? ? connection: SocketIO ('ws://socket地址:端口號(hào)'),
? ? ? vuex: {? ? ? ?// 不需要用到vuex這個(gè)可以不加
? ? ? ? ? ? store,
? ? ? ? ? ? actionPrefix: 'SOCKET_',
? ? ? ? ? ? mutationPrefix: 'SOCKET_'
? ? ? }
}))
四灯荧、在組件中使用
注意：下面的 connect 方法和 message 方法是我對(duì)接的后臺(tái)寫的監(jiān)聽事件名稱礁击，實(shí)際使用時(shí)每個(gè)后臺(tái)定義的名稱都不會(huì)一樣，這個(gè)要事先和你的后臺(tái)確認(rèn)好逗载。
<script>
? ? export default {
? ? ? ? data() {
? ? ? ? ? ? id: '',
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.$socket.emit('login', loginId);? ? ? ?//觸發(fā)socket連接
? ? ? ? },
? ? ? ? sockets: {
? ? ? ? ? ? connect() {
? ??????????????this.id = this.$socket.id;
? ??????????????this.$socket.emit('login', loginId);? ? ? //監(jiān)聽connect事件
? ? ? ? ? ? };
? ? ? ? ? ? message(data) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//監(jiān)聽message事件哆窿，方法是后臺(tái)定義和提供的
? ? ? ? ? ? ? ? console.log(data);
? ? ? ? ? ? }
? ? ? ? },
????????methods: {
? ? ? ? ????clickButton: function(val){? ? ? ? ? ? ? ? ? ? ? ?//添加按鈕事件向服務(wù)端發(fā)送數(shù)據(jù)
? ? ? ? ? ? ????this.$socket.emit('emit_method', val);
????????}
????}
</script>
