#1. Basics

1. workerman

workerman is a conscientious and high-performance PHP socket server framework developed by Chinese people. It has more than 4K stars on gayHub, the world's largest same-sex dating platform. You can imagine how big it is. The cattle X.

It can be deployed alone or integrated into MVC frameworks (TP, laravel, etc.). It can be said to be very practical and has good concurrency effects.

Official website address:

http://www.workerman.net/workerman

gayhub address:

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

2. gateway-worker

gateway-worker (hereinafter referred to as gateway) is a TCP long connection framework developed based on workerman and is used to quickly develop TCP Long connection application.

Online chat generally uses long connections to maintain communication. Although using workerman can achieve the same effect, gateway is more convenient and faster.

(The chat room built by polling has been OUT, it is too...)

gayhub address:

https://github.com/walkor/GatewayWorker

3. gatewayClient

gateClient is a component used to assist worker or gateway in grouping users and sending information to users. At the same time, it can quickly and easily convert the original The system uid and clientid are bound.

gayhub address:

https://github.com/walkor/GatewayClient

2. Theory:

1. Principles of integration with the MVC system:

##·The existing mvc framework project and the independent deployment of GatewayWorker do not interfere with each other ;

##·

All business logic is completed by post/get from the website page to the mvc framework;##·

GatewayWorker does not accept data from the client, that is, GatewayWorker does not process any business logic, and GatewayWorker is only used as a one-way push channel; ·

Only when the mvc framework needs to actively push data to the browser, the Gateway API (GatewayClient) is called in the mvc framework to complete the push. 2. Implementation steps:

(1) The website page establishes a websocket connection with GatewayWorker; (2) GatewayWorker finds that a page initiates a connection When, the client_id of the corresponding connection is sent to the website page;

(3) After the website page receives the client_id, it triggers an ajax request (assuming it is bind.php) and sends the client_id to the mvc backend;

(4) After mvc backend bind.php receives client_id, it uses GatewayClient to call Gateway::bindUid($client_id, $uid) to bind client_id to the current uid (user id or client unique identifier). If there is a group or group sending function, you can also use Gateway::joinGroup($client_id, $group_id) to add the client_id to the corresponding group;

(5) All requests initiated by the page are directly post/get to mvc The framework handles unified processing, including sending messages;

(6) When the mvc framework needs to send data to a certain uid or a certain group during business processing, directly call the GatewayClient interface Gateway::sendToUid Gateway::sendToGroup Just wait for it to be sent.

3. Implementation—Configuring and opening Gateway:

1. Download and use gateway

Can be used alone or placed in the public directory of the framework.

2. Edit start.php

·

start.php needs to be run using the php command line. ·

Pay attention to the path of require_once

ini_set('display_errors', 'on');
use Workerman\Worker;
if(strpos(strtolower(PHP_OS), 'win') === 0)
{
    exit("start.php not support windows, please use start_for_win.bat\n");
}
// 檢查擴展
if(!extension_loaded('pcntl'))
{
    exit("Please install pcntl extension.See http://doc3.workerman.net/appendices/install-extension.html\n");
}
if(!extension_loaded('posix'))
{
    exit("Please install posix extension.See http://doc3.workerman.net/appendices/install-extension.html\n");
}
// 標記是全局啟動
define('GLOBAL_START', 1);
// 注意這里的路徑
require_once '../vendor/autoload.php';
// 加載所有Applications/*/start.php，以便啟動所有服務(wù)
foreach(glob(__DIR__.'/Applications/*/start*.php') as $start_file)
{
    require_once $start_file;
}
// 運行所有服務(wù)
Worker::runAll();

3. start_gateway.php

·

Can be edited in ApplicationsYourAppstart_gateway.php

// 部分文件內(nèi)容
//將$gateway改成websocket協(xié)議,demo中是text協(xié)議
$gateway = new Gateway("websocket://0.0.0.0:8282");

4.start_register.php

·

It should be noted that $register in start_register.php must be text protocol, and the port must be noted

// register 服務(wù)必須是text協(xié)議
$register = new Register('text://192.168.124.125:1238');

5. After configuration, open start.php

$ php start.php start

4. Implementation - Server Development

As mentioned above, the user only goes through the gateway's onConnect($client_id) when the connection is triggered, and all All business operations should be implemented in the web system. So I created a controller of GatewayServer.php to handle these businesses

<?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,同時進行分組,根據(jù)接收到的roomid進行分組操作
        $userGuid=Session::get(&#39;loginuser&#39;);
        $roomId=intval(trimAll($request->post(&#39;room&#39;)));
        $clientId=trimAll($request->post(&#39;client_id&#39;));
        // 接受到上面的三個參數(shù),進行分組操作
        Gateway::$registerAddress = &#39;192.168.124.125:1238&#39;;
        // client_id與uid綁定
        // Gateway::bindUid($clientId, $userGuid);
        // 加入某個群組（可調(diào)用多次加入多個群組） 將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);
    }
    // 接受用戶的信息 并且發(fā)送
    public function send(Request $request){
        Gateway::$registerAddress = &#39;192.168.124.125:1238&#39;;
        // 獲得數(shù)據(jù)
        $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;
        // 發(fā)送信息應(yīng)當發(fā)送json數(shù)據(jù),同時應(yīng)該返回發(fā)送的用戶的guid,用于客戶端進行判斷使用
        $dataArr=json_encode(array(
            &#39;message&#39; => $message,
            &#39;user&#39;=>$userGuid
        ));
        // 向roomId的分組發(fā)送數(shù)據(jù)
        Gateway::sendToGroup($roomId,$dataArr);
    }
}

5. Implementation-Client connection and sending/receiving:

After opening the gateway, you can monitor and wait for the browser to access. The client uses js to monitor websocket here:

1. Used to handle client connection to websocket and receive messages

// 這個示例和gateway官網(wǎng)的示例是一樣的
    // 監(jiān)聽端口
    ws = new WebSocket("ws://192.168.124.125:8282");
    // 綁定分組的ajaxURL
    var ajaxUrl="{:url('/gateway/bind')}";
    // 發(fā)送消息的ajaxURL
    var ajaxMsgUrl="{:url('/gateway/send')}";
    // 通過房間號進行分組
    var roomId="{$roomInfo.guid}";
    // 獲取當前登錄用戶的guid，用于標識是自己發(fā)送的信息
    var loginUser="{$userLoginInfo.guid}";
    // 獲取當前房間號的主播的uid，用于標識是主播發(fā)送的信息
    var roomUser="{$roomInfo.uid}";
    // 服務(wù)端主動推送消息時會觸發(fā)這里的onmessage
    ws.onmessage = function(e){
        // console.log(e.data);
        // json數(shù)據(jù)轉(zhuǎn)換成js對象
        var data = eval("("+e.data+")");
        var type = data.type || '';
        switch(type){
            // Events.php中返回的init類型的消息，將client_id發(fā)給后臺進行uid綁定
            case 'init':
                // 利用jquery發(fā)起ajax請求，將client_id發(fā)給后端進行uid綁定
                $.post(ajaxUrl, {client_id: data.client_id,room:roomId}, function(data){
                    // console.log(data);
                }, 'json');
                break;
            // 當mvc框架調(diào)用GatewayClient發(fā)消息時直接alert出來
            default :
                // 如果登陸用戶的guid和數(shù)據(jù)發(fā)送者的guid一樣，則使用不同的顏色（只能自己看到）
                if(loginUser == data.user){
                    addMsgToHtml(data.message,'#F37B1D');
                    break;
                // 如果發(fā)送者的guid和主播uid一樣，則對所有的顯示都增加一個[主播標識]
                }else if(data.user==roomUser){
                    addMsgToHtml("[主播] "+data.message,'#0e90d2');
                    break;
                }else{
                // 其他的就正常發(fā)送消息
                    addMsgToHtml(data.message,'#333');
                }
                break;
        }
    };

2. Used to add received messages to divs for display

// 向面板中增加新接收到的消息
    // 其中message是消息，color是顯示的顏色，主要為了區(qū)分主播以及自己發(fā)送的消息和系統(tǒng)提示
    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);
    }

3. Used to send messages

// 發(fā)送聊天消息
    function sendMsg(){
        // 去掉onclick屬性,使得3秒之內(nèi)無法發(fā)送信息
        $("#sendMsgBox").attr('onclick','');
        var btnObj=$("#sendMsgBtn");
        var tmpNum=3;
        var tmpMsg=tmpNum+' S';
        btnObj.text(tmpMsg);
        var int =setInterval(function () {
            // 3秒之內(nèi)不能發(fā)送信息,3秒之后,回復(fù)onclick屬性以及文字
            if(tmpNum==0){
                tmpMsg="發(fā)送";
                clearInterval(int);
                btnObj.text("發(fā)送");
                $("#sendMsgBox").attr('onclick','sendMsg()');
            }
            btnObj.text(tmpMsg);
            tmpNum-=1;
            tmpMsg=tmpNum+' S';
        },1000);
        var message=$("#chattext").val().trim();
        var obj=$("#room-viedo-chat");
        var html=obj.html();
        if(message.length>=140){
            // 獲取html,并且增加html
            addMsgToHtml("系統(tǒng)提示: 不能超過140個字符","#8b0000");
            return false;
        }
        if(message.length==0){
            // 獲取html,并且增加html
            addMsgToHtml("系統(tǒng)提示: 不能發(fā)送空消息","#8b0000");
            return false;
        }
        // 向server端發(fā)送ajax請求
        $.post(ajaxMsgUrl,{room:roomId,message:message},function (data) {
        },'json');
        return false;
    }

4. A little html Code

<!--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="輸入聊天內(nèi)容..."></textarea>
        </div>
        <div class="am-btn am-btn-default right-div am-text-center"onclick="sendMsg();"id="sendMsgBox">
            <span class="" id="sendMsgBtn">
                發(fā)送
            </span>
        </div>
    </div>
    <!--chat box end -->

六、效果：

效果很明顯：

·系統(tǒng)提示是單獨的顏色

·本人發(fā)布的，是自己能夠分辨的橙色

·主播發(fā)布的是藍色，同時前面有[主播]標識

·看其他人發(fā)布的就是普通的顏色

PHP中文網(wǎng)，有大量免費的workerman入門教程，歡迎大家學習！

The above is the detailed content of How does workerman implement group chat?. For more information, please follow other related articles on the PHP Chinese website!