Vue與Node.js經過socket.io通訊的示例

#1、Node中socket.io基礎

一、是什麼 Socket.IO類庫，是在服務器和瀏覽器之間提供一個共享接口，其能夠用於實現如下幾種通訊方式：

• HTML5中的WebSocket通訊
• Flash中使用的WebSocket通訊
• XHR輪詢
• JSONP輪詢
• Forever Iframe 在通訊時，客戶端與服務器端可使用相同的API 二、怎麼用 原理：建立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)
複製代碼

2、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，快速升職加薪，走上人生巔峯。