美文网首页
vue + koa2 + socket.io 实现简单聊天室

vue + koa2 + socket.io 实现简单聊天室

作者: 0000000asdasd | 来源:发表于2019-07-30 10:57 被阅读0次

    vue 使用 vue-socket.io,nodejs 使用 socket.io 实现简单聊天室
    vue 前端页面
    首先 npm install vue-socket.io -S 下载组件

    // main.js
    import scoket from "vue-socket.io"; // 引入组件
    Vue.use(new scoket({
      debug: true, // 开启提示
      connection: url,  // 后台服务地址
    }))
    // speak.vue
    mounted(){
      this.$socket.emit("connection",1);
    },
    methods: {
      sendMessage(val) {
        this.$socket.emit("chatmessage", {name:val,value:this.value});
        this.value = "";
      },
    },
    sockets: { // 名字不能改,服务触发方法的列表 
      connect() {
        //与socket.io连接后回调
          console.log("socket connected");
      },
      // user 名字,与服务端保持一致,data 后台返回数据
      user(data) {
        // 执行的操作
        this.message.splice(this.message, 0, data);
      }
    }
    ----------------------------- node.js -------------------------------------
    import koa from 'koa'
    const app = new koa()
    const server = app.listen(4000);
    const io = require('socket.io').listen(server);
    io.sockets.on('connection', (socket) => {
        console.log('连接成功', { id: socket.id })
        socket.on('chatmessage', (msg) => {
            io.sockets.connected[socket.id].emit('user', msg.value); // 指定发送
            socket.emit('user', msg.value); // 广播
        });
        socket.on('disconnect', () => { // 关闭链接的时候会执行
            console.log('user disconnected');
        });
    });
    

    大概就是这样子吧,不太完善,不过可以特别简单的用

    相关文章

      网友评论

          本文标题:vue + koa2 + socket.io 实现简单聊天室

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