美文网首页前端Vue专辑成长日记Vue
Vue与Node.js通过socket.io通信的示例

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

作者: a333661d6d6e | 来源:发表于2018-11-19 13:57 被阅读2次

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

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。
    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    相关文章

      网友评论

        本文标题:Vue与Node.js通过socket.io通信的示例

        本文链接:https://www.haomeiwen.com/subject/wnsofqtx.html