前言：前端與后端交互時，一般都使用ajax，但ajax無法實時獲取更新的數(shù)據(jù)，采用輪詢方式開銷會非常大,且后端也無法主動推送數(shù)據(jù)給前端。vue提供了socket.io來解決這個問題，一旦數(shù)據(jù)進行更新，服務端可主動將數(shù)據(jù)推送至客戶端，常用于消息類推送的場景中。
socket.io的github地址：https://github.com/MetinSeylan/Vue-Socket.io
一、關于socket通信的簡單說明
Socket是在應用層和傳輸層之間的一個抽象層，它把TCP/IP層復雜的操作抽象為幾個簡單的接口，供應用層調(diào)用實現(xiàn)進程在網(wǎng)絡中的通信（來源百科）。它是一種全雙工（服務端與客戶端可同時收發(fā)消息）通信，當有數(shù)據(jù)更新時服務端可以主動的將消息推送到客戶端。
Socket通信的運行流程如下：
1、服務端啟動Socket監(jiān)聽端口，監(jiān)聽是否有客戶端連接進來，即Watch Socket；
2、客戶端通過http協(xié)議發(fā)送請求報文，服務端響應請求后會將協(xié)議升級為WebSocket，并創(chuàng)建一個新的Socket對象，客戶端Socket隨即與服務端Socket進行連接和通信，且客戶端不再與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地址:端口號'),
? ? ? vuex: {? ? ? ?// 不需要用到vuex這個可以不加
? ? ? ? ? ? store,
? ? ? ? ? ? actionPrefix: 'SOCKET_',
? ? ? ? ? ? mutationPrefix: 'SOCKET_'
? ? ? }
}))
四、在組件中使用
注意：下面的 connect 方法和 message 方法是我對接的后臺寫的監(jiā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事件，方法是后臺定義和提供的
? ? ? ? ? ? ? ? console.log(data);
? ? ? ? ? ? }
? ? ? ? },
????????methods: {
? ? ? ? ????clickButton: function(val){? ? ? ? ? ? ? ? ? ? ? ?//添加按鈕事件向服務端發(fā)送數(shù)據(jù)
? ? ? ? ? ? ????this.$socket.emit('emit_method', val);
????????}
????}
</script>
