socket io與vue-cli的結(jié)合使用的示例代碼
更新時(shí)間：2018年11月01日 11:33:03 作者：sanxiansheng
這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
關(guān)于在vue中使用websocket的簡(jiǎn)易例子
使用vue-cli生成一個(gè)vue模版
安裝三個(gè)依賴(lài)：
npm install -s socket.io npm install -s vue-socket.io npm install -s socket.io-client
創(chuàng)建一個(gè)新的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ā)過(guò)來(lái)的數(shù)據(jù)是：'+data) //發(fā)送回去 事件名為loginmsg
})
})
console.log('socket端口：8000');
sever.listen(8000)
在package.js文件中添加啟動(dòng)腳本：
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服務(wù)端鏈接
在.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:{ //在此接收又服務(wù)器發(fā)送過(guò)來(lái)的數(shù)據(jù) ps：注意此處的方法名要與服務(wù)器的發(fā)送的事件保持一致才能接收到
connect:function() { //與ws:127.0.0.1:8000連接后回調(diào)
console.log('連接成功');
},
loginmsg:function(value) {
console.log(value);//監(jiān)聽(tīng)login(后端向前端emit login的回調(diào))
this.backdata=value;
}
},
methods:{
Login(){
this.$socket.emit('login',this.msg);
}
}
}
</script>
先啟動(dòng)8000端口 npm run server
然后打開(kāi)新的命令行 npm run dev 啟動(dòng)vue模版
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js this.$router.push獲取不到params參數(shù)問(wèn)題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數(shù)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue router返回到指定的路由的場(chǎng)景分析
這篇文章主要介紹了vue router返回到指定的路由的場(chǎng)景分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
vue導(dǎo)出excel文件流中文亂碼問(wèn)題及解決
這篇文章主要介紹了vue導(dǎo)出excel文件流中文亂碼問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
今天小編就為大家分享一篇vue 實(shí)現(xiàn)特定條件下綁定事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專(zhuān)門(mén)調(diào)試vue項(xiàng)目的調(diào)試工具,安裝成功之后,右邊會(huì)出現(xiàn)一個(gè)vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例
這篇文章主要介紹了vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
淺談vue?腳手架文件結(jié)構(gòu)及加載過(guò)程
這篇文章主要介紹了vue腳手架文件結(jié)構(gòu)及加載過(guò)程淺談,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個(gè)系統(tǒng)使得Vue能夠自動(dòng)追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新相關(guān)的DOM元素。本文將會(huì)探討Vue響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理及其底層實(shí)現(xiàn)2023-03-03
本文主要介紹了vue3中watch和watchEffect的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05