socket io與vue-cli的結(jié)合使用的示例代碼
關(guā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服務(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ā)送過來的數(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)聽login(后端向前端emit login的回調(diào)) this.backdata=value; } }, methods:{ Login(){ this.$socket.emit('login',this.msg); } } } </script>
先啟動8000端口 npm run server
然后打開新的命令行 npm run dev 啟動vue模版
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js this.$router.push獲取不到params參數(shù)問題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數(shù)問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專門調(diào)試vue項目的調(diào)試工具,安裝成功之后,右邊會出現(xiàn)一個vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07vue2.0 + ele的循環(huán)表單及驗證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗證字段方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+koa2實現(xiàn)session、token登陸狀態(tài)驗證的示例
這篇文章主要介紹了vue+koa2實現(xiàn)session、token登陸狀態(tài)驗證的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08Vue響應(yīng)式原理與虛擬DOM實現(xiàn)步驟詳細講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個系統(tǒng)使得Vue能夠自動追蹤數(shù)據(jù)變化,并在數(shù)據(jù)發(fā)生變化時自動更新相關(guān)的DOM元素。本文將會探討Vue響應(yīng)式系統(tǒng)的實現(xiàn)原理及其底層實現(xiàn)2023-03-03