Vue与Node.js通过socket.io通信的示例
#一、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年前端人员 });//帮助突破技术瓶颈，提升思维能力 结语 感谢您的观看，如有不足之处，欢迎批评指正。
