您现在的位置是:首页 > 文章详情

Vue与Node.js通过socket.io通信的示例

日期:2018-11-19点击:403

#一、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年前端人员 });//帮助突破技术瓶颈,提升思维能力 

结语

感谢您的观看,如有不足之处,欢迎批评指正。

原文链接:https://my.oschina.net/u/4018697/blog/2878031
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章