Comment Workerman implémente-t-il le chat de groupe ?-Workerman-php.cn

Comment Workerman implémente-t-il le chat de groupe ?

1. >1. Workerman

Workerman est un framework de serveur socket PHP consciencieux et performant développé par des Chinois. Il compte plus de 4 000 étoiles sur gayHub, le plus grand au monde. plateforme de rencontres sexuelles. Vous pouvez imaginer sa taille.

Il peut être déployé seul ou intégré dans des frameworks MVC (TP, laravel, etc.). On peut dire qu'il est très pratique et a de bons effets de concurrence.

Adresse officielle du site :

http://www.workerman.net/workerman

Adresse gayhub :

https://github.com/ walkor /workerman/

2. gateway-worker

gateway-worker (ci-après dénommé gateway) est un framework de connexion longue TCP développé sur la base de workerman et est utilisé pour développer rapidement une application de connexion TCP Long.

Le chat en ligne utilise généralement de longues connexions pour maintenir la communication. Bien que l'utilisation de Workerman puisse produire le même effet, la passerelle est plus pratique et plus rapide.

(Le salon de discussion construit par sondage est OUT, il l'est aussi...)

Adresse gayhub :

https://github.com/walkor/GatewayWorker

3. gatewayClient

gateClient est un composant utilisé pour aider le travailleur ou la passerelle à regrouper les utilisateurs et à envoyer des informations aux utilisateurs en même temps, il peut être rapide et facile. convert original L'uid système et l'id client sont liés.

Adresse gayhub :

https://github.com/walkor/GatewayClient

Théorie :

1. Principes d'intégration avec le système MVC :

Les projets de framework mvc existants et le déploiement indépendant de GatewayWorker n'interfèrent pas les uns avec les autres ;

Toute la logique métier est complétée par la publication/obtention de la page du site Web dans le framework mvc

GatewayWorker n'accepte pas les données du client, c'est-à-dire que GatewayWorker ne traite aucune logique métier et GatewayWorker n'est utilisé que comme canal push unidirectionnel ·

Uniquement lorsque le framework mvc doit transmettre activement des données au navigateur, l'API Gateway (GatewayClient) est appelée dans le framework mvc pour terminer le push. 2. Étapes de mise en œuvre :

(1) La page du site Web établit une connexion Websocket avec GatewayWorker (2) GatewayWorker constate qu'une page ; initie une connexion Lorsque le client_id de la connexion correspondante est envoyé à la page du site Web

(3) Une fois que la page du site Web a reçu le client_id, elle déclenche une requête ajax (en supposant qu'il s'agit de bind.php) et envoie le client_id au backend mvc ;

(4) Après avoir reçu le client_id, le backend mvc bind.php utilise GatewayClient pour appeler Gateway::bindUid($client_id, $uid) pour lier le client_id au courant uid (identifiant utilisateur ou identifiant unique du client). S'il existe une fonction d'envoi de groupe ou de groupe, vous pouvez également utiliser Gateway::joinGroup($client_id, $group_id) pour ajouter le client_id au groupe correspondant

(5) Toutes les requêtes initiées par la page sont ; publier/accéder directement à mvc Le framework gère le traitement unifié, y compris l'envoi de messages ;

(6) Lorsque le framework mvc doit envoyer des données à un certain uid ou à un groupe pendant le traitement métier, il appelle directement l'interface GatewayClient. Gateway::sendToUid Gateway::sendToGroup Attendez simplement qu'il soit envoyé.

3. Mise en œuvre – Configuration et ouverture de la passerelle :

1. Téléchargez et utilisez la passerelle

Peut être utilisé seul ou placé dans le répertoire public du framework.

2. Modifiez start.php

start.php doit être exécuté à l'aide de la ligne de commande php.

Faites attention au chemin de require_once

ini_set(&#39;display_errors&#39;, &#39;on&#39;);
use Workerman\Worker;
if(strpos(strtolower(PHP_OS), &#39;win&#39;) === 0)
{
    exit("start.php not support windows, please use start_for_win.bat\n");
}
// 检查扩展
if(!extension_loaded(&#39;pcntl&#39;))
{
    exit("Please install pcntl extension.See http://doc3.workerman.net/appendices/install-extension.html\n");
}
if(!extension_loaded(&#39;posix&#39;))
{
    exit("Please install posix extension.See http://doc3.workerman.net/appendices/install-extension.html\n");
}
// 标记是全局启动
define(&#39;GLOBAL_START&#39;, 1);
// 注意这里的路径
require_once &#39;../vendor/autoload.php&#39;;
// 加载所有Applications/*/start.php，以便启动所有服务
foreach(glob(__DIR__.&#39;/Applications/*/start*.php&#39;) as $start_file)
{
    require_once $start_file;
}
// 运行所有服务
Worker::runAll();

Copier après la connexion

start_gateway.php

Peut être modifié dans ApplicationsYourAppstart_gateway.php

// 部分文件内容
//将$gateway改成websocket协议,demo中是text协议
$gateway = new Gateway("websocket://0.0.0.0:8282");

Copier après la connexion

4.start_register.php

Il convient de noter que $register dans start_register.php doit être un protocole texte, et le port doit être noté

// register 服务必须是text协议
$register = new Register(&#39;text://192.168.124.125:1238&#39;);

Copier après la connexion

5 Après la configuration, ouvrez start.php<🎜. >

$ php start.php start

Copier après la connexion

4. Implémentation - Développement du serveur

Comme mentionné ci-dessus, l'utilisateur ne passe par le onConnect($client_id) de la passerelle que lorsque le la connexion est déclenchée et toutes les opérations commerciales doivent être implémentées dans le système Web. J'ai donc créé un contrôleur de GatewayServer.php pour gérer ces services

<?php
/**
 * Author: root
 * Date  : 17-3-27
 * time  : 上午12:32
 */
namespace app\index\controller;
use GatewayClient\Gateway;
use think\Cache;
use think\Controller;
use think\Request;
use think\Session;
class GatewayServer extends Controller
{
    public function _initialize(){
    }
    public function bind(Request $request)
    {
        // 用户连接websocket之后,绑定uid和clientid,同时进行分组,根据接收到的roomid进行分组操作
        $userGuid=Session::get(&#39;loginuser&#39;);
        $roomId=intval(trimAll($request->post(&#39;room&#39;)));
        $clientId=trimAll($request->post(&#39;client_id&#39;));
        // 接受到上面的三个参数,进行分组操作
        Gateway::$registerAddress = &#39;192.168.124.125:1238&#39;;
        // client_id与uid绑定
        // Gateway::bindUid($clientId, $userGuid);
        // 加入某个群组（可调用多次加入多个群组） 将clientid加入roomid分组中
        Gateway::joinGroup($clientId, $roomId);
        // 返回ajax json信息
        $dataArr=[
            &#39;code&#39;=>$userGuid,
            &#39;status&#39;=>true,
            &#39;message&#39;=>&#39;Group Success&#39;
        ];
        return json()->data($dataArr);
    }
    // 接受用户的信息 并且发送
    public function send(Request $request){
        Gateway::$registerAddress = &#39;192.168.124.125:1238&#39;;
        // 获得数据
        $userGuid=Session::get(&#39;loginuser&#39;);
        $roomId=intval(trimAll($request->post(&#39;room&#39;)));
        $message=trim($request->post(&#39;message&#39;));
        // 获得用户的称呼
        $userInfo=Cache::get($userGuid);
        // 将用户的昵称以及用户的message进行拼接
        $nickname=$userInfo[&#39;nickname&#39;];
        $message=$nickname." : ".$message;
        // 发送信息应当发送json数据,同时应该返回发送的用户的guid,用于客户端进行判断使用
        $dataArr=json_encode(array(
            &#39;message&#39; => $message,
            &#39;user&#39;=>$userGuid
        ));
        // 向roomId的分组发送数据
        Gateway::sendToGroup($roomId,$dataArr);
    }
}

Copier après la connexion

5. Implémentation - connexion client et envoi/réception :

Après avoir ouvert la passerelle, vous pouvez surveiller et attendre que le navigateur y accède. Le client utilise js pour surveiller websocket ici :

1 Utilisé pour gérer la connexion du client à websocket et recevoir des messages

// 这个示例和gateway官网的示例是一样的
    // 监听端口
    ws = new WebSocket("ws://192.168.124.125:8282");
    // 绑定分组的ajaxURL
    var ajaxUrl="{:url(&#39;/gateway/bind&#39;)}";
    // 发送消息的ajaxURL
    var ajaxMsgUrl="{:url(&#39;/gateway/send&#39;)}";
    // 通过房间号进行分组
    var roomId="{$roomInfo.guid}";
    // 获取当前登录用户的guid，用于标识是自己发送的信息
    var loginUser="{$userLoginInfo.guid}";
    // 获取当前房间号的主播的uid，用于标识是主播发送的信息
    var roomUser="{$roomInfo.uid}";
    // 服务端主动推送消息时会触发这里的onmessage
    ws.onmessage = function(e){
        // console.log(e.data);
        // json数据转换成js对象
        var data = eval("("+e.data+")");
        var type = data.type || &#39;&#39;;
        switch(type){
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case &#39;init&#39;:
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                $.post(ajaxUrl, {client_id: data.client_id,room:roomId}, function(data){
                    // console.log(data);
                }, &#39;json&#39;);
                break;
            // 当mvc框架调用GatewayClient发消息时直接alert出来
            default :
                // 如果登陆用户的guid和数据发送者的guid一样，则使用不同的颜色（只能自己看到）
                if(loginUser == data.user){
                    addMsgToHtml(data.message,&#39;#F37B1D&#39;);
                    break;
                // 如果发送者的guid和主播uid一样，则对所有的显示都增加一个[主播标识]
                }else if(data.user==roomUser){
                    addMsgToHtml("[主播] "+data.message,&#39;#0e90d2&#39;);
                    break;
                }else{
                // 其他的就正常发送消息
                    addMsgToHtml(data.message,&#39;#333&#39;);
                }
                break;
        }
    };

Copier après la connexion

2. . Utilisé pour ajouter les messages reçus aux divs pour l'affichage

// 向面板中增加新接收到的消息
    // 其中message是消息，color是显示的颜色，主要为了区分主播以及自己发送的消息和系统提示
    function addMsgToHtml(message,color) {
        if(message.length==0){
            return false;
        }
        // 获取html,并且增加html
        var obj=$("#room-viedo-chat");
        var html=obj.html();
        // 
        html+=&#39;<p><font color="&#39;+color+&#39;">&#39;+message+&#39;</p>&#39;;
        obj.html(html);
        // 将滚动条滚动到底部
        obj.scrollTop(obj[0].scrollHeight);
    }

Copier après la connexion

3 Utilisé pour envoyer des messages

// 发送聊天消息
    function sendMsg(){
        // 去掉onclick属性,使得3秒之内无法发送信息
        $("#sendMsgBox").attr(&#39;onclick&#39;,&#39;&#39;);
        var btnObj=$("#sendMsgBtn");
        var tmpNum=3;
        var tmpMsg=tmpNum+&#39; S&#39;;
        btnObj.text(tmpMsg);
        var int =setInterval(function () {
            // 3秒之内不能发送信息,3秒之后,回复onclick属性以及文字
            if(tmpNum==0){
                tmpMsg="发送";
                clearInterval(int);
                btnObj.text("发送");
                $("#sendMsgBox").attr(&#39;onclick&#39;,&#39;sendMsg()&#39;);
            }
            btnObj.text(tmpMsg);
            tmpNum-=1;
            tmpMsg=tmpNum+&#39; S&#39;;
        },1000);
        var message=$("#chattext").val().trim();
        var obj=$("#room-viedo-chat");
        var html=obj.html();
        if(message.length>=140){
            // 获取html,并且增加html
            addMsgToHtml("系统提示: 不能超过140个字符","#8b0000");
            return false;
        }
        if(message.length==0){
            // 获取html,并且增加html
            addMsgToHtml("系统提示: 不能发送空消息","#8b0000");
            return false;
        }
        // 向server端发送ajax请求
        $.post(ajaxMsgUrl,{room:roomId,message:message},function (data) {
        },&#39;json&#39;);
        return false;
    }

Copier après la connexion

4. >

<!--chat box start -->
    <div class=" am-u-md-12 am-u-lg-12 room-viedo-chat" id="room-viedo-chat" style="font-size:14px;">
    </div>
    <div class="am-u-md-12 am-u-lg-12 room-viedo-chat-button-box">
        <div class="left-div">
            <textarea name="chattext" id="chattext" placeholder="输入聊天内容..."></textarea>
        </div>
        <div class="am-btn am-btn-default right-div am-text-center"onclick="sendMsg();"id="sendMsgBox">
            <span class="" id="sendMsgBtn">
                发送
            </span>
        </div>
    </div>
    <!--chat box end -->

Copier après la connexion

六、效果：

效果很明显：

·系统提示是单独的颜色

·本人发布的，是自己能够分辨的橙色

·主播发布的是蓝色，同时前面有[主播]标识

·看其他人发布的就是普通的颜色

Comment Workerman implémente-t-il le chat de groupe ?