Vue.js如何使用Socket的示例代码 超正析象管(Image Orthicon)

在很多需求服务中，需要浏览器与服务器实时通信，实现扫码登录(扫码后手机确认登录，PC网页完成登录并跳转)、订单语言提醒等功能。这是基于两端之间的实时通信。对于前端来说，实现浏览器与服务器实时通信的最佳选择是Socket。IO库，可以快速实现两端的实时通信功能。

1.什么是Socket。IO？

插座。IO是一个WebSocket库，可以实现浏览器和服务器之间的实时、双向、基于事件的通信。它包括：Node.js服务器库和浏览器的Javascript客户端库。它会根据浏览器自动从WebSocket、AJAX长轮询、Iframe流等中选择实现网络实时应用的最佳方式，非常方便人性化，支持最低的浏览器是IE5.5

Socket的主要特性。超正析象管(Image Orthicon)

(1)支持浏览器/Nodejs环境(2)、支持双向通信(3)、API简单易用(4)、支持二进制传输(5)、减少传输数据量

3.插座的使用。Vue.js中的IO

(1)委托人

将以下代码添加到NPM install vue-socket . io-save main . js中。

从“vue-socket . io”vue . use导入vuesocketio(new vuesocketio({ debug : true，//服务器端地址连接：' http://localhost 33603000 '，vuex 3360 } })来发送消息和收听消息

//向此发送信息。$ socket.emit ('login '，{username :' username '，password : ' password ' })；//接收this.sockets.subscribe('注销'，(数据)={console.log(数据)}) (2)服务器的信息

服务器，我们基于express构建节点服务器。

NPM安装-保存快递NPM安装-保存socket.ioindex.js文件

var app=require(' express ')()；var http=require('http ')。服务器(app)；var io=require(' socket . io ')(http)；APP.get ('/'，function (req，RES){ RES . send(' h1 hello web Show/h1 ')；});Io.on ('connection '，function(socket){//receive data socket . on(' log in '，function(obj){ console . log(obj . username)；//发送数据socket.emit ('relogin '，{msg: ` Hello ${obj.username} `，code : 200 })；});});http.listen(3000，function(){ console . log(' listening on * :3000 ')；});然后启动服务器服务

效果可以通过node index.js客户端查看。

4.Socket做什么事件。IO有

io.on('connect '，OnConnect)；onConnect(socket){ //函数被发送到当前的客户端socket . emit(‘hello’，‘你能听到我说话吗？’，1，2，' ABC ')；//发送给除发送方socket.broadcast.emit以外的所有客户端(' broadcast '，' hello friends！');//将它发送到“游戏”房间中除发送方socket.to(“游戏”)以外的所有客户端。emit(‘不错的游戏’，‘我们来玩个游戏吧’)；//发送到“game1”或“game2”房间中除发送方socket . to(“game 1”)以外的所有客户端。to ('game2 ')。emit(‘不错的游戏’，‘我们也来玩个游戏吧’)；//发送给“游戏”房间的所有客户端，包括发送者io . in(‘game’)。emit(' big-notification '，'游戏即将开始')；//发送到同一“myNamespace”命名空间下的所有客户端，包括发送方io . of(‘my namespace’)。emit(' bigger-notification '，'锦标赛即将开始')；//用指定的socket tid(私有消息)socket . to(socket tid)将其发送到客户端。emit(‘嘿’‘我刚认识你’)；//带有回执的message socket . emit(' question '，'你这么认为吗？'，函数(答案){ })；//送socket.com出版社(假)。不压缩就发出(‘未压缩’‘这很粗糙’)；//如果客户端还接收不到消息，消息可能会丢失socket . volatile . emit(‘可能’，‘你真的需要吗？’);//发送给当前节点实例下的所有客户端(如果使用了多个节点实例)io.local.emit ('hi '，'我可爱的宝贝')；};以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。