轻松学会Workerman实战

Workerman实现简单聊天室

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

新建一个项目了,把之前下载好的Workerman整个文件夹复制进去。再新建一个chat.php文件。http://doc.workerman.net/315122

<?php
use Workerman\Worker;
require_once __DIR__ . '/Workerman/Autoloader.php';

// 创建一个websocket协议的Worker监听7272接口
$worker = new Worker("websocket://0.0.0.0:7272");

// 只启动1个进程,这样方便客户端之间传输数据
$worker->count = 1;

$uid = 0;

// 当客户端连上来时
$worker->onConnect = function ($connection) {
    global $ws_worker, $uid;
    // 为这个连接分配一个uid
    $connection->uid = ++$uid;
};

// 当客户端发送消息过来时,转发给所有人
$worker->onMessage = function ($connection, $data) {
    global $worker;
    foreach ($worker->connections as $conn) {
        $conn->send("user_{$connection->uid} said: $data");
    }
};

// 当客户端断开时,广播给所有客户端
$worker->onClose = function ($connection) {
    global $worker;
    foreach ($worker->connections as $conn) {
        $conn->send("user_{$connection->uid} logout");
    }
};

Worker::runAll();

Tips:
$uid 因为我们这个项目,没有实现登陆注册,所以++$uid直接做了一个自增。用它来当做用户的唯一识别id
connectionsworkerman提供的,它里面保存了当前进程的所有的客户端连接对象。也就说每个用户连接上来, 都可以分配一个唯一的编号。编号的名字,我们可以自定义,这里就叫uid。它的值,也就是刚才自增得到的$uid

启动服务

php chat.php start

再新建一个index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="message in messages">{{message}}</li>
    </ul>

    <form @submit.prevent="onSubmit">
        <input type="text" v-model="content">
        <input type="submit">
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var ws = new WebSocket("ws://0.0.0.0:7272");

    // windows用户千万注意,这里你需要使用
    // var ws = new WebSocket("ws://127.0.0.1:7272");

    var app = new Vue({
        el: '#app',
        data: {
            messages: [],
            content: ''
        },
        created: function () {
            ws.onmessage = function (e) {
                this.messages.push(e.data);
            }.bind(this);
        },
        methods: {
             onSubmit: function () {
                 ws.send(this.content);
                 this.content = '';
            }
        }
    })
</script>

</body>
</html>
Vue 意义
data 在模板中需要渲染,或者其他自定义方法中调用的数据
created vue的实例被创建之后
methods 自定义的一些方法
prevent 阻止表单的默认提交事件
new WebSocket 连接上websocket服务
onmessage 有消息过来时
send 发送消息给服务端

打开两个不同的浏览器,看看是否能聊天了。

Tips:
注意了,不是一个浏览器的两个标签页。一定是两个不同的浏览器。
调试使用chromenetwork
刷新后,发现$uid会不断自增。这是因为这里的$uid比较特殊,和正常web开发不太一样的是。phpweb应用中一次请求过后会释放所有的变量与资源,也就说你每次刷新页面,$uid都会变为0。而WorkerMan开发的应用程序在第一次载入解析后便常驻内存。所以这里的$uid,它可以不断自增。