js php 简单聊天室

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

html代码，

        <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">                    .content{            width: 500px;            height: 500px;            border: 1px solid red;        }        .left{            max-width: 200px;        }        .right{            float: right;            max-width: 200px;        }        <div class="box">        <div class="content">                                   <button class="send">发送        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('
'+ data.data.content +'
');            break;        }        console.log('收到信息',data);    }    ws.onerror = function(e){        cnsole.log('连接失败');    }    $('.send').click(function(){        if(to == ''){            alert('缺少发送人');        }        let content = $('#content').val()        $('.content').append('
'+ content +'
');        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);    }

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)    {            }}

demo 下载地址

链接：https://pan.baidu.com/s/1ESjQDYx1mVJ0gWERsL2tUw
提取码：8888

环境运行

windows 运行\GatewayWorker 下双击运行start_for_win.bat 即可运行环境

liunx 中 在\GatewayWorker 中执行

　　先执行 php start.php start 看看有没有报错 （有报错那就自己解决咯，一般都是php 禁用函数的问题）

　　如果没有报错 那就ctrl + c 退出 在用 php start.php start -d 以守护进程的方式打开

使用方式

一个浏览器打开： demo 目录中的 jq-index.html 并在地址后面加上?user_id=1&to=2 参数 如 jq-index.html?user_id=1&to=2

另一个浏览器打开：demo 目录中的 jq-index.html 并在地址后面加上?user_id=1&to=2 参数 如 jq-index.html?user_id=2&to=1

就可以使用啦 ，两个链接地址就是参数不同罢了，本人比较懒，懒的写那边么多样式，页面凑合用就行

如果对你有用，麻烦点个关注