Question

我尝试编写聊天应用程序代码。我使用（在服务器端）：php laravel 5.4和pusher以及（在客户端）vue.js和laravel-echo。

我已经建立了一个聊天组，什么是“公共聊天室”。现在我正在私人聊天室工作。

我的问题：最好的做法是（在客户端）听取用户所属房间的所有频道。

我的目标：检查（如在facebook Messenger网页上）私人和公共房间的每个频道。

现在我在chat-window组件中有这个：

created() {
  axios.get('/chatroom').then(response => {
      this.chatRooms = response.data;
      console.log('get /chatroom response: ' + response.data);
  });

  axios.get('/messages').then(response => {
      this.messages = response.data;
      console.log('get /messages response: ' + response.data);
  });

  Echo.join('chatroom')
      .here((users) => {
          this.usersInRoom = users;
      })
      .joining((user) => {
          this.usersInRoom.push(user);
      })
      .leaving((user) => {
          this.usersInRoom = this.usersInRoom.filter(u => u != user)
      })
      .listen('MessagePosted', (e) => {
          this.messages.push({
              message: e.message.message,
              user: e.user
          });
      });
  }
});

但是这只会监听chatroom频道。客户如何收听所有聊天室（this.chatRooms）？

提前感谢答案！

Answer 1

所以我发现每个用户都必须是自己的频道。

然后我修改了我的chat-window组件：

<template lang="html">
  <div class="panel panel-default">
      <div class="panel-heading" style="height: 60px">
        <chat-room-picker :chatrooms="chatRooms" :newmessage="newmessage" :defaultchatroomid="pickedchatroomid" class="pull-left" v-on:chatroompicked="chatroompick"></chat-room-picker>
        <chat-room-creator class="pull-right"></chat-room-creator>
      </div>
        <chat-room :chatroomid="pickedchatroomid" :newmessage="newmessage"></chat-room>
  </div>
</template>

<script>
export default {
  data() {
    return {
     userId: loggedUserFS.id,
     userName: loggedUserFS.name,
     chatRooms: chatRoomsFS,
     pickedchatroomid: defaultChatRoomIdFS,
     newmessage: {},
    }
 },
 methods: {
   chatroompick(id) {
     this.pickedchatroomid = id;
   },
 },
 created() {
  // this.getCookiesParams();
  var tmp = this.chatRooms[0];
  this.pickedchatroomid = tmp.id;
   var channelName = 'chat-' + this.userId;
   console.debug(channelName + ", channel init.");
   window.Echo.join(channelName)
       .listen('NewMessageEvent', (e) => {
           console.debug("incoming message on " + channelName + ": " + JSON.stringify(e));
           console.debug(e.message.chatRoom_id + "==" + this.pickedchatroomid);
           console.debug(channelName +" : "+ e.message.chatRoom_id + "==" + this.pickedchatroomid);
           // TODO: finish it
           if(e.message.chatRoom_id == this.pickedchatroomid) { // if the reciced message comes from the pickedchatroom
             console.debug("reciced message comes from the pickedchatroom!");
             this.newmessage = e;
           } else { // if the reciced message does not come from the pickedchatroom
             this.newmessage = e;
           }
       });
  }
}
</script>

<style lang="css">
</style>

我做了一个chat-room-picker什么是下拉菜单，你可以用它来改变聊天室。还有一个chat-room组件，用于显示当前聊天室的消息。两个组件中都有vue-watch - es并且新消息被更改，聊天室添加消息（如果消息属于当前聊天室），否则不执行任何操作，{{1如果邮件属于其他房间，则开始闪烁。

chat-room-picker注意：

chat-room-picker

聊天室组件的监视部分：

  watch : {
    newmessage : function (value) {
      var message = value;
      var picker = $(".chatRoomPicker");
      //TODO: check that the message belongs to current chat room
      picker.addClass("blink");
      picker.on("click", function() {
        picker.removeClass("blink");
      });
    }
  }

服务器端（在控制器中）：

  watch : {
    chatroomid : function (value) { // if chat-room is changed
      this.getChatRoomMessages();
    },
    newmessage : function(value) {  // TODO: here or parent component check the room of the message
      console.debug("newmessage received:" + JSON.stringify(value));
      var msgTmp = value.message;
      msgTmp.user = value.user;

      this.messages.push(msgTmp);
    }
  },

broadcast(new NewMessageEvent($message, $user, $usersOfChatRoom));的{{1}}方法如下所示：

broadcastOn

我知道它没有完成，但我评论了应该在哪里完成代码。

它可能不是最优雅的方式，但它有效。如果其他人有其他解决方案请分享！

javascript用echo回听多个socket通道

1 个答案: