一、Node中socket.io基礎(chǔ)

1、是什么

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

HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR輪詢 JSONP輪詢 Forever Iframe

在通信時(shí)，客戶端與服務(wù)器端可以使用相同的API

2、怎么用

原理：創(chuàng)建Scoket.IO服務(wù)器，該服務(wù)器依賴(lài)于一個(gè)已經(jīng)創(chuàng)建的HTTP服務(wù)器

服務(wù)器端引入

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建服務(wù)器var socket=sio.listen(server)//監(jiān)聽(tīng)http服務(wù)器socket.on('connection',(socket)=>{//建立連接后的回調(diào)函數(shù)})//這里的socket參數(shù)，是服務(wù)器端用于與客戶端建立連接的scoket端口對(duì)象

客戶端引入

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

發(fā)送接收消息

send 發(fā)送

socket.send('收到信息')

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

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

emit發(fā)送

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

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

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

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

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

廣播消息

用于多個(gè)客戶端與服務(wù)器端連接。服務(wù)器端使用sockets屬性，向所用客戶端發(fā)消息。或者使用用于與客戶端建立連接的socket對(duì)象，該對(duì)象具有broadcast對(duì)象，代表所有與其他Socket.IO客戶端建立連接的socket對(duì)象。

//服務(wù)器端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

在項(xiàng)目目錄下

npm install vue-socket.ionpm 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/'));//與服務(wù)端鏈接

Vue組件中

export default { name: "NetList", sockets: { //不能改,j建立連接自動(dòng)調(diào)用connect connect: function() {  //與socket.io連接后回調(diào)  console.log("socket connected"); },//服務(wù)端向客戶端發(fā)送login事件 login: function(value) {  //監(jiān)聽(tīng)login(后端向前端emit login的回調(diào))console.log(value) } },updated(){//數(shù)據(jù)更新時(shí)，向服務(wù)器端發(fā)送事件this.$socket.emit("compile"); //觸發(fā)start}