当前位置: 首页 > 科技观察

Vue.js是如何使用Socket.IO的?

时间:2023-03-11 22:52:09 科技观察

在很多业务需求中,需要浏览器与服务器端实时通信,实现功能,比如:扫码登录(扫码后手机端确认登录,PC端网页完成登录)登录和跳转)、订单语言提醒等,都是基于两端的实时通信。对于前端来说,要实现浏览器和服务器的实时通信,最好的选择就是Socket.IO库,它可以快速实现两端的实时通信功能。1.什么是Socket.IO?Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实时、双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。会根据浏览器自动从WebSocket、AJAX长轮询、Iframe流等多种方式中选择最佳方式实现网络实时应用,非常方便和人性化,支持浏览器低至IE5.52,Socket.IO主要特点(1),支持浏览器/Nodejs环境(2),支持双向通信(3),简单易用的API(4),支持二进制传输(5),减少传输数据量3、Vue.js中Socket.IO的使用(1)客户端npminstallvue-socket.io--savemain.js添加如下代码importVueSocketIOfrom'vue-socket.io'Vue.use(newVueSocketIO({debug:true,//服务器地址connection:'http://localhost:3000',vuex:{}}))发送消息和监听消息//向服务器发送信息this.$socket.emit('login',{username:'username',password:'password'});//从服务器接收信息this.sockets.subscribe('relogin',(data)=>{console.log(data)})(2)Server服务器,我们搭建一个n基于express的ode服务器。npminstall--saveexpressnpminstall--savesocket.ioindex.js文件varapp=require('express')();varhttp=require('http').Server(app);vario=require('socket.io')(http);app.get('/',function(req,res){res.send('Hellowebshow');});io.on('connection',function(socket){//接收数据socket。on('login',function(obj){console.log(obj.username);//发送数据socket.emit('relogin',{msg:`Hello${obj.username}`,code:200});});});http.listen(3000,function(){console.log('listeningon*:3000');});然后启动服务端服务nodeindex.js客户端查看效果。4、Socket.IO有哪些事件?');//发送给除发送者之外的所有客户端socket.broadcast.emit('broadcast','hellofriends!');//发送给'游戏'房间中除发送者套接字之外的所有客户端。to('game').emit('nicegame',"let'splayagame");//发送给所有和'game1'或'game2'在同一个房间的客户端,发送者除外socket.to('game1').to('game2').emit('nicegame',"let'splayagame(too)");//发送给'game'房间的所有客户端,包括发送者io.in('game').emit('big-announcement','thegamewillstartsoon');//发送给同命名空间'myNamespace'下的所有客户端,包括发送者io.of('myNamespace').emit('bigger-announcement','thetournamentwillstartsoon');//发送给指定socketid的客户端(私信)socket.to().emit('hey','Ijustmetyou');//消息包含回执socket.emit('question','doyouthinkso?',function(answer){});//不压缩,直接发送messagemaybelostsocket.volatile.emit('maybe','doyoureallyneedit?');//发送给当前节点实例下的所有客户端(在使用多节点实例的情况下)ances)io.local.emit('嗨','mylovelybabies');};5、Socket.IO全家桶