右侧,当前在聊天室的用户信息,现在还是假的。底下私聊这里,用户列表也是写死的。这一集就来实现这个功能。

controller

init方法中,再添加一个users,位置就放在history上面

//初始化
public function init(Request $request)
{
    //..

    //在线用户
    $this->users();

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

    //..
}
/**
 * 当前在线用户
 */
private function users()
{
    $data = [
        'type' => 'users',
        'data' => Gateway::getAllClientSessions()
    ];

    Gateway::sendToAll(json_encode($data));
}

这里的getAllClientSessions的作用,当然就是查询所有在线的用户了。network中一看,发现只有一个client_id的信息,并没有用户的头像id等等。但是用户列表那边却又需要显示这些东西。

session

解决方案就是将需要显示的内容,都存入到session中。 大家知道,在laravelsession是自己实现的,并不是php中自带的。 不过这里要存的session既不是laravel中的session,也不是php中的session。而是GatewayWorker中的session。

找到bind方法

private function bind($request)
{
    //...

    Gateway::setSession($client_id, [
        'id' => $id,
        'avatar' => Auth::user()->avatar(),
        'name' => Auth::user()->name
    ]);
}

刷新后,再看network,发现这次就将用户的id头像名称发送过去了,那我们只需要稍微修改下vue部分,将数据显示出来就好了

vue

data() {
    return {
        users: [],
    }
},
case 'users':
    this.users = data.data;
    break;
<div class="panel-heading">在线用户</div>

<div class="panel-body">
    <ul class="list-group">
        <li class="list-group-item" v-for="user in users">
            <img :src="user.avatar" class="img-circle">
            {{user.name}}
        </li>

    </ul>
</div>
 <select class="form-control" id="user_id">
    <option>所有人</option>
    <option :value="user.id" v-for="user in users">{{user.name}}</option>
</select>

试试

在打开一个新浏览器,发现在线列表的用户信息会自动变化,是不是很棒啊。