vue中使用 soket.io建立小型聊天室

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42790916/article/details/86686389

1.首先在vue脚手架里下载soketio的依赖
npm install vue-socket.io --save
npm install socket.io-client --save
2.在 main.js里面引用

Vue.use(new VueSicketio({
        debug: true,
        connection: 'http://192.168.0.188:2020', //注意端口 如果跟后端的端口不匹配是要报跨域的
        脚手架上面配置的反向代理也要看看是不是只有在发送请求的时候才起效以及反向代理的    端口
        vuex: {
            store,
            actionPrefix: 'SOCKET_',
            mutationPrefix: 'SOCKET_'
        }
    }))

3.在需要引用的组件中引用

sockets:{
//这里是接收消息的地方 
    new_message(date){
      console.log(date)
    }
  },
  methods: {
      clickButton(){
      //这个是发送消息的方法
        if(!this.val){
          this.$toasted.error('不能发送空信息').goAway(1500)
          return
        }else{
          this.$socket.emit('new message', this.val);
          this.list.push(this.val)
          this.val = ''
        }  
    }
  },
  created(){
  //刚进入聊天室的时候把对方的id发送过去通过跟后端约定的名称 例如我这就是add user
    this.$socket.emit('add user', this.$route.query.id);
  }

主要的配置还是在后台

展开阅读全文

没有更多推荐了,返回首页