Home » Php » javascript – Update members online with WebSocket

javascript – Update members online with WebSocket

Posted by: admin February 25, 2020 Leave a comment

Questions:

I’m creating an online chat with WebSocket in PHP and the library Ratchet.

Suddenly I would like to automatically update the members connected in front-end. When a user leaves the page, the “online” field in my database changes automatically, when the user returns to the page with an active session, it puts him online again. In itself I would therefore like to refresh my function which checks if my user is online and not without refreshing my page. With WebSocket and JS is it doable? Or should I do it in Ajax?

Here is my PHP code which lists my online and offline users.

<ul class="detailuserchat" style="display:none;">
    <?php
    if (isset($userInfo['connected'])) :
        foreach ($userInfo['connected'] as $userconnect) :
            $dateStamp = new DateTime($userconnect['user_activity']);

    ?>
            <li class="show_member_pole_ active d-flex py-2 border-top">
                <div class="profile"><img src="../../../images/profil.svg" alt="image">
                    <span class="online"></span>
                </div>
                <div class="info">
                    <?php if ($userconnect['user_name'] == $_SESSION['username']) : ?>
                        <p><b><?php echo ucfirst($userconnect['user_name']) . " (Moi)"; ?></b></p>
                    <?php else : ?>
                        <p><b><?php echo ucfirst($userconnect['user_name']); ?></b></p>
                    <?php endif; ?>
                    <p>Connecté</p>
                </div>
                <div class="badge badge-success badge-pill my-auto mx-2"></div>
                <small class="timeStamp text-muted my-auto" data-timestamp=<?php echo $dateStamp->getTimestamp(); ?>>...</small>
            </li>
    <?php
        endforeach;
    endif; ?>

    <?php
    if (isset($userInfo['notconnected'])) :
        foreach ($userInfo['notconnected'] as $usernotconnect) :
            $dateStamp = new DateTime($usernotconnect['user_activity']);
    ?>
            <li class="show_member_pole_ active d-flex py-2 border-top">
                <div class="profile"><img src="../../../images/profil.svg" alt="image">
                    <span class="offline"></span>
                </div>
                <div class="info">
                    <?php if ($usernotconnect['user_name'] == $_SESSION['username']) : ?>
                        <p><b><?php echo ucfirst($usernotconnect['user_name']) . " (Moi)"; ?></b></p>
                    <?php else : ?>
                        <p><b><?php echo ucfirst($usernotconnect['user_name']); ?></b></p>
                    <?php endif; ?>
                    <p>Non-Connecté</p>
                </div>
                <div class="badge badge-danger badge-pill my-auto mx-2"></div>
                <small class="timeStamp text-muted my-auto" data-timestamp=<?php echo $dateStamp->getTimestamp(); ?>>...</small>
            </li>
    <?php
        endforeach;
    endif;
    ?>
</ul>
How to&Answers: