Vue 中作為客戶端使用 vue-socket.io
socket.io 簡介及使用
1.安裝依賴
npm install vue-socket.io
2.在main.js中引入?
import Vue from 'vue';?
import VueSocketIO from 'vue-socket.io';
3.與服務端建立鏈接
Vue.use(new VueSocketIO({
?debug: true,
?connection: 'http://10.27.1.72:8088/test'
}));
4.監(jiān)聽和接收服務端的消息方式1
var vm = new Vue({
?sockets:{???? //將（socket.on）綁定事件放在sockets中
?????????connect: function(){? ? //鏈接成功 觸發(fā)此事件
? ??????????//向服務端發(fā)消息
????????????????this.$socket.emit('事件名稱與服務端保持一致', 參數(shù)1，參數(shù)2，...);?
?????????????????console.log('鏈接成功') },
? ? //接收服務端傳過來的值
?????????getVal: function(val){? ? //getVal名字自定義 與服務端的保持一致
?????????????console.log('接收過來的服務端傳遞的val')
?????????}
? ? ? ? ? ?connect_error(err) { //這里監(jiān)聽 鏈接失敗的事件 //鏈接失敗 sccket會一直嘗試去鏈接
????????????????????????????????????????????有些情況下 我們不需要一直嘗試
?????????????????????// 關(guān)閉請求
?????????????????????????this.$socket.close();
?????????????????????// 開啟請求
?????????????????????????/ this.$socket.open(); }
?})
5.在組件中使用
export default{
?????data(){
?????????return{
?????????????????id:''
? ? ? ? ?}
?????}//與data同級目錄
?????sockets:{
?????????????connect: function(){ ???? //這里是監(jiān)聽connect事件
?????????????????????this.id=this.$socket.id
?????????????},
? ? ? ? ? ? ? ? //接收服務端發(fā)來的推送
?????????????getVal: function(val){?????//?getVal?名字自定義 與服務端的保持一致
?????????????????????console.log('val')
?????????????????}
? ? ? ?},
?????mounted(){
? ? ? ? ? ? //因為通過路由進當前頁面sockets里的connect未被觸發(fā)所以需在mounted里觸發(fā)一次?即????????????//????在這里觸發(fā)connect事件?
?????????????this.$socket.emit('connect', val);?
? ? ? }
?????methods: {
? ? ? ? ? ? //自定義事件向服務端發(fā)消息
?????????????sendToservice: function(val){?
????????????????? ?this.$socket.emit('與服務端接收的名稱保持一致', val);??????????????????}
?????????}? ?
? }
參考地址? ?vue.js socket.io的使用
浪客行1213的簡書? ?
