Vue與Node.js通過socket.io通信？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

龍口網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,龍口網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經驗。已為龍口近1000家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿網(wǎng)站建設要多少錢，請找那個售后服務好的龍口做網(wǎng)站的公司定做！

一、Node中socket.io基礎

1、是什么

Socket.IO類庫，是在服務器和瀏覽器之間提供一個共享接口，其可以用于實現(xiàn)以下幾種通信方式：

1. HTML5中的WebSocket通信

2. Flash中使用的WebSocket通信

3. XHR輪詢

4. JSONP輪詢

5. Forever Iframe

在通信時，客戶端與服務器端可以使用相同的API

2、怎么用

原理：創(chuàng)建Scoket.IO服務器，該服務器依賴于一個已經創(chuàng)建的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)//創(chuàng)thhp建服務器
var socket=sio.listen(server)//監(jiān)聽http服務器
socket.on('connection',(socket)=>{//建立連接后的回調函數(shù)
})//這里的socket參數(shù)，是服務器端用于與客戶端建立連接的scoket端口對象

客戶端引入

 <script src='/socket.io/socket.io.js'></script>
//js
var socket=io.connect()

發(fā)送接收消息

send 發(fā)送

socket.send('收到信息')

監(jiān)聽message接收消息

socket.on('message',(val)={ console.log(val) })

emit發(fā)送

socket.emit('news',data,(val1,val2...)=>{})

監(jiān)聽同樣是事件接收

socket.on('news',(val)={ console.log(val) })

使用send發(fā)消息，要用‘message'接收，另一端會觸發(fā)該事件.

使用emit發(fā)送，另一端觸發(fā)同樣的事件來接收。

廣播消息

用于多個客戶端與服務器端連接。服務器端使用sockets屬性，向所用客戶端發(fā)消息。或者使用用于與客戶端建立連接的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)
})

//客戶端
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/'));//與服務端鏈接

Vue組件中

export default {
 name: "NetList",
 sockets: {
 //不能改,j建立連接自動調用connect
 connect: function() {
  //與socket.io連接后回調
  console.log("socket connected");
 },
//服務端向客戶端發(fā)送login事件
 login: function(value) {
  //監(jiān)聽login(后端向前端emit login的回調)
console.log(value)
 }
 },
updated(){
//數(shù)據(jù)更新時，向服務器端發(fā)送事件
this.$socket.emit("compile"); //觸發(fā)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);//創(chuàng)建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');
 }); 
});

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

當前名稱：Vue與Node.js通過socket.io通信
文章來源：http://aaarwkj.com/article28/ihhccp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制開發(fā)、網(wǎng)站改版、自適應網(wǎng)站、微信小程序、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)