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

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);
  }

主要的配置还是在后台

你可能感兴趣的:(vue)