上一集,我们把聊天的信息存入到了数据库。那我希望呢,当用户进入聊天室后,最好能读取最新的几条历史信息。

model

先去修改一下模型,把usersmessages的关联关系建立出来。

###message.php

public function user()
{
    return $this->belongsTo('App\User');
}

###user.php

public function messages()
{
    return $this->hasMany('App\Message');
}

controller

控制器中,新建一个history方法,并在init中调用它一下。位置就放在login的上面

public function init(Request $request)
{
    //...

    //历史记录
    $this->history();

    //进入聊天室了
    $this->login();
}

这里的类型,我们新添加一个history

查询的时候,按照id倒序,也就是最新的了,然后只查询5条。显示太多了也不好看,我觉得这里就查5条意思意思就可以了。

但是这个查询出来的数据,直接发送给vue是用不了的。因为格式和vue v-for中的结构不一样。所以我这里用了map方法,它是laravel里集合中的方法。遍历后,会返回给我一个新的数组。如果你使用其他框架,那这里可以使用foreach来处理。这样数组的结构,就和之前say方法的结构一致了。

还有要注意的,发送给的用户,这一次就不是发送给所有人了,而是发送给自己。你想啊,你刚进入聊天室,只有你自己需要读取历史记录。而其他之前已经进入聊天室的人,他们是不需要重新再接受历史记录的。

/**
 * 最新的5条聊天历史信息
 */
private function history()
{
    $data = ['type' => 'history'];

    $messages = Message::with('user')->orderBy('id', 'desc')->limit(5)->get();
    $data['data'] = $messages->map(function ($item, $key) {
        return [
            'avatar' => $item->user->avatar(),
            'name' => $item->user->name,
            'content' => $item->content,
            'time' => $item->created_at->format("Y-m-d H:i:s")
        ];
    });

    Gateway::sendToUid(Auth::id(), json_encode($data));
}

js

vuejs部分,我们在switch里,添加一个新的条件

case 'history':
    this.messages = data.data;
    break;

用户进入聊天室后,首先就把拿到的数据,直接赋值给messages。这样窗口中,马上就能显示出来了。