轻松学会Workerman实战

发送聊天信息

此课程是收费课程,请先购买或加入会员后再访问。

接着要做的,当然就是发布聊天信息了。

html

先去修改一下表单部分,给form标签,绑定上onSubmit这个方法。注意这里有个prevent,它的作用是阻止默认事件。如果不写这个,那你点击表单的提交按钮,页面会跳转刷新的。

<form @submit.prevent="onSubmit">
    <!-- ... -->

    <div class="form-group">
        <!-- ... --> 
        <textarea class="form-control" rows="3" id="content" v-model="content"></textarea>
    </div>
</form>
data() {
    return {
        messages: [],
        content: '',
    }
},

//...
methods: {
    onSubmit() {
        axios.post('/say', {content: this.content})
        this.content = ''
    }
}

js部分,就下一个简单的post请求,将用户输入的content发送给php就好了。

router

web.php中,先要添加一条新路由

Route::post('/say', 'HomeController@say');

controller

use App\Message;

控制器中,定义对应的say方法

public function say(Request $request)
{
    $data = [
        'type' => 'say',
        'data' => [
            'avatar' => Auth::user()->avatar(),
            'name' => Auth::user()->name,
            'content' => $request->input('content'),
            'time' => date("Y-m-d H:i:s", time())
        ]
    ];

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

     //存入数据库,以后可以查询聊天记录
    Message::create([
        'user_id' => Auth::id(),
        'content' => $request->input('content')
    ]);
}

model

模型中还要修改一下,这次我们没有定义白名单,直接使用了黑名单,它的值为空。意思也就是所有提交过来的数据都可以插入数据库。

protected $guarded = [];

试试

现在就可以来试试了,同时打开两个浏览器,大家来聊个天吧。

自动滚动

当聊天的数据多了以后,需要人工的去滚动滚动条才能看到最新的信息,这个明显体验不够好。

case 'say':
    this.messages.push(data.data);
    this.$nextTick(function () {
        $('.panel-body').animate({scrollTop: $('.messages').height()});
    })
    break;

this.$nextTick 是指等dom更新后再执行。