socket io與vue-cli的結合使用的示例代碼
更新時間：2018年11月01日 11:33:03 作者：sanxiansheng
這篇文章主要介紹了socket io與vue-cli的結合使用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
關于在vue中使用websocket的簡易例子
使用vue-cli生成一個vue模版
安裝三個依賴：
npm install -s socket.io npm install -s vue-socket.io npm install -s socket.io-client
創(chuàng)建一個新的servers：在文件最外層創(chuàng)建 server/app.js文件：
var sever=require('http').createServer();
var io=require('socket.io')(sever)
io.on('connection', function (socket) {
socket.on('login',function(data){ //接收連接中的login事件
console.log(data);
io.emit('loginmsg','你發(fā)過來的數(shù)據(jù)是：'+data) //發(fā)送回去 事件名為loginmsg
})
})
console.log('socket端口：8000');
sever.listen(8000)
在package.js文件中添加啟動腳本：
script{ "server": "node sever/app.js"}
在mian.js中vue.use():
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(VueSocketio, socketio('ws://127.0.0.1:8000'));//與websocket服務端鏈接
在.vue文件中：
<template>
<div>
<div>
<input type="text" v-model="msg">
<button @click='Login'>向8000端口發(fā)送數(shù)據(jù)</button>
{{backdata}}
</div>
</div>
</template>
<script>
export default{
data:function (){
return {
msg:"aaaa",
backdata:'',
}
},
sockets:{ //在此接收又服務器發(fā)送過來的數(shù)據(jù) ps：注意此處的方法名要與服務器的發(fā)送的事件保持一致才能接收到
connect:function() { //與ws:127.0.0.1:8000連接后回調
console.log('連接成功');
},
loginmsg:function(value) {
console.log(value);//監(jiān)聽login(后端向前端emit login的回調)
this.backdata=value;
}
},
methods:{
Login(){
this.$socket.emit('login',this.msg);
}
}
}
</script>
先啟動8000端口 npm run server
然后打開新的命令行 npm run dev 啟動vue模版
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了深入理解vue中slot與slot-scope的具體使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
寫了vue項目和小程序，發(fā)現(xiàn)二者有許多相同之處，在此想總結一下二者的共同點和區(qū)別,需要的朋友可以參考下2018-08-08
vue如何使用process.env搭建自定義運行環(huán)境
這篇文章主要介紹了vue如何使用process.env搭建自定義運行環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3 $attrs和inheritAttrs的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過 Options API 和 Composition API 對比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對大家有所幫助2021-11-11
這篇文章主要介紹了Vue子組件調用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)手機掃描二維碼預覽頁面效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設置方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了詳解基于iview-ui的導航欄路徑（面包屑）配置,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue 關閉當前頁、關閉當前標簽tagsView的實現(xiàn)方法
這篇文章主要介紹了Vue 關閉當前頁、關閉當前標簽tagsView,主要有兩種方式，一種是在vue頁面直接實現(xiàn)，另一種在js文件中寫自定義函數(shù)，在vue頁面中調用，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下2022-08-08