Vue與Node.js通過socket.io通訊的示例
阿新 • • 發佈:2018-11-22
#一、Node中socket.io基礎
1、是什麼
Socket.IO類庫,是在伺服器和瀏覽器之間提供一個共享介面,其可以用於實現以下幾種通訊方式:
- HTML5中的WebSocket通訊
- Flash中使用的WebSocket通訊
- XHR輪詢
- JSONP輪詢
- Forever Iframe
在通訊時,客戶端與伺服器端可以使用相同的API
2、怎麼用
原理:建立Scoket.IO伺服器,該伺服器依賴於一個已經建立的HTTP伺服器
伺服器端引入
var http=require('http') var sio=require('socket.io') var server=http.createServer((req,res)=>{ res.writeHead(200,{'Content-type':'text/html'}) res.end(fs.readFileSync('./snak.html')) }).listen(8088)//創thhp建伺服器 var socket=sio.listen(server)//監聽http伺服器 socket.on('connection',(socket)=>{//建立連線後的回撥函式 })//這裡的socket引數,是伺服器端用於與客戶端建立連線的scoket埠物件
客戶端引入
<script src='/socket.io/socket.io.js'></script>
//js
var socket=io.connect()
傳送接收訊息
send 傳送
socket.send('收到資訊')
監聽message接收訊息
socket.on('message',(val)={ console.log(val) })
emit傳送
socket.emit('news',data,(val1,val2...)=>{})
監聽同樣是事件接收
socket.on('news',(val)={ console.log(val) })
使用send發訊息,要用‘message’接收,另一端會觸發該事件.
使用emit傳送,另一端觸發同樣的事件來接收。
廣播訊息
用於多個客戶端與伺服器端連線。伺服器端使用sockets屬性,向所用客戶端發訊息。或者使用用於與客戶端建立連線的socket物件,該物件具有broadcast物件,代表所有與其他Socket.IO客戶端建立連線的socket物件。
//伺服器端 var io = require('socket.io').listen(server); io.sockets.on('connection', (socket) => { io.sockets.emit('login',name); //socket.broadcast.emit('login',name) })//歡迎加入全棧開發交流圈一起學習交流:864305860 //客戶端 var socket=io.connect() socket.emit('login',name)
二、Vue中使用socket.io
在專案目錄下
npm install vue-socket.io
npm install socket.io-client
在main.js中引入
`import VueSocketio from` `'vue-socket.io'``;`
`import socketio from` `'socket.io-client'``;`
`Vue.use(VueSocketio,socketio(``'[http://localhost:8888/](http://localhost:8888/)'``));//與服務端連結`
Vue元件中
export default {
name: "NetList",
sockets: {
//不能改,j建立連線自動呼叫connect
connect: function() {
//與socket.io連線後回撥
console.log("socket connected");
},
//服務端向客戶端傳送login事件
login: function(value) {
//監聽login(後端向前端emit login的回撥)
console.log(value)//歡迎加入全棧開發交流圈一起學習交流:864305860
}//面向1-3年前端人員
},//幫助突破技術瓶頸,提升思維能力
updated(){
//資料更新時,向伺服器端傳送事件
this.$socket.emit("compile"); //觸發start
}
伺服器端
var http = require('http');
var fs = require('fs');
var exec = require('child_process').exec;
var server = http.createServer(function (req, res) {
// console.log(req)
// console.log(res)
// fs.readFile('./index.html',function(error,data){//若根目錄有index.html,訪問地址,將顯示index.html
// res.writeHead(200,{'Content-Type':'text/html'});
// res.end(data,'utf-8');
// });
}).listen(8888);//建立http服務
console.log('Server running ');
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
console.log('連結成功');
socket.on('compile', () => {
socket.emit('login', 'ok');//歡迎加入全棧開發交流圈一起學習交流:864305860
}); //面向1-3年前端人員
});//幫助突破技術瓶頸,提升思維能力
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。