workerman小案例

引入workerman

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

//创建一个worke监听2345端口 使用http通讯协议
$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
Worker::runAll();

启动workerman php 文件名 start
前端代码

<div id="app">
        <ul>
            <li v-for="message in message">{{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");

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

点击链接加入群聊：企鹅群:827944755