vue中websocket用法及封装
1.先下载
cnpm install vue-socket.io --save-dev
2.在src文件夹里面新建lib文件夹,在lib文件夹里面新建socket.js
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import axios from 'axios' ;
var a;
var wesocket = {
debug: true ,
connection: "" ,
vuex: { }
}
axios ( {
method: 'GET' ,
url: 'http://192.168.0.110:8091/api/getpushurl' ,
headers: {
'Content-Type' : 'application/json'
} ,
} ) . then ( function ( response) {
wesocket. connection = response. data + '/price' ;
if ( wesocket. connection != "" ) {
Vue. use ( new VueSocketIO ( wesocket) )
}
console. log ( response. data)
} ) ;
export default a;
3.在main.js引入
import VueSocketIO from './lib/socket'
new Vue ( {
el: '#app' ,
VueSocketIO,
components: {
App
} ,
template: '<App/>'
} )
4.在组件中的用法
sockets: {
connect ( ) {
this . id = this . $socket. id;
} ,
servermessage ( data) {
console. log ( data) ;
}
} ,
methods: {
clickButton: function ( val) {
this . $socket. emit ( "sendMessageToServer" , val) ;
} ,
}
参考链接vue
参考链接ws
参考链接NPM