js php 简单聊天室

本文使用 websocket + gatewayworker 搭的一个简单聊天室，随便写了点样式，大家不要介意哈，主要看流程就好

html代码，

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        .left{
            max-width: 200px;
        }
        .right{
            float: right;
            max-width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
           
        </div>
        <input type="text" id="content">
        <button class="send">发送</button>
    </div>

<script src="jquery-3.6.0.min.js"></script>
<script>
    let ws = new WebSocket('ws://127.0.0.1:8282');
    let user_id = getQueryVariable('user_id');
    let to = getQueryVariable('to');
    ws.onopen = function(e){
        console.log('连接成功');
    }
    ws.onmessage = function(e){
        let data = JSON.parse(e.data);
        switch (data.cmd){
            case 'init': send('bindUid',{client_id: data.client_id,user_id: user_id});break;
            case 'message': 
                $('.content').append('<div class="left ">'+ data.data.content +'</div><div style="clear:both;"></div>');
            break;
        }
        console.log('收到信息',data);
    }
    ws.onerror = function(e){
        cnsole.log('连接失败');
    }
    $('.send').click(function(){
        if(to == ''){
            alert('缺少发送人');
        }
        let content = $('#content').val()
        $('.content').append('<div class="right">'+ content +'</div><div style="clear:both;"></div>');
        send('message',{to:to,content:content,user_id:user_id});
    })
    
    const send = (cmd,data) => {
        ws.send(JSON.stringify({
            cmd: cmd,
            data: data
        }))
    }

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

</script>
</body>
</html>

gatewayworker 主要修改以下两个文件，

Applications/YourApp/start_gateway.php

将默认的tcp 协议改为websocket

Applications/YourApp/Events.php 主要逻辑在这里

<?php

//declare(ticks=1);

use \GatewayWorker\Lib\Gateway;


/**
 * 主逻辑
 * 主要是处理 onConnect onMessage onClose 三个方法
 * onConnect 和 onClose 如果不需要可以不用实现并删除
 */
class Events
{

    /**
     * 当客户端连接时触发
     * 如果业务不需此回调可以删除onConnect
     *
     * @param int $client_id 连接id
     */
    public static function onConnect($client_id)
    {
        $arr = [
            'cmd' => 'init',
            'client_id' => $client_id
        ];
        Gateway::sendToClient($client_id, json_encode($arr));
    }

    /**
     * 当客户端发来消息时触发
     * @param int $client_id 连接id
     * @param mixed $message 具体消息
     */
    public static function onMessage($client_id, $message)
    {
        $message = json_decode($message,true);
        $cmd = $message['cmd'];
        $data = $message['data'];
        switch($cmd){
            case 'bindUid':  
                Gateway::bindUid($data['client_id'], $data['user_id']);
                Gateway::sendToUid($data['user_id'],json_encode(['cmd'=>'ready','data'=>$data]));
                break;
            case 'message':
                Gateway::sendToUid($data['to'],json_encode(['cmd'=>'message','data'=>['user_id'=>$data['user_id'],'content'=>$data['content']]])); break;
        }

    }

    
    /**
     * 当用户断开连接时触发
     * @param int $client_id 连接id
     */
    public static function onClose($client_id)
    {
        
    }


}