当前位置：首页 > article >正文

5 php7.4中开发一个websocket 聊天好友例表展示

article 2024/9/25 16:12:08

index.php 原本设计时就是为了其它平台调用，所以没有注册一类的。需要传来的参数确定用户的id，但为了方便，设计了好友表，并且也没有加为好友一类的操作。自动增加。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好友列表</title>
    <link rel="stylesheet" href="statics/css/index.css">
    <script src="statics/js/jquery.js""></script>
    <script src="statics/js/sweetalert.min.js"></script>
</head>
<body>
<div class="friend-list">
    <div class="search-container">
        <input type="text" id="friendSearch" placeholder="搜索好友" class="search-input">
        <button id="searchButton" class="search-button">搜索</button>
    </div>
    <div class="friend-item">
        <img src="statics/image/default-user.png" class="avatar" alt="好友头像">
        <div class="friend-info" data-url="chat.php?from_user_id=2&to_user_id=0&user_name=公用&order=5555sssdeesssuser&Avatar=https://pchat.jjsos.cn/headerimage/fba80786-929d-4f19-809b-8aba4ed73508" >
            <strong>公共通知</strong>
            <span class="unread-count">3条未读消息</span>
        </div>
    </div>
</div>
</body>
<?php
require_once __DIR__ . '/config/config.php';
?>
<script>

    $(document).ready(function() {


        function loadFriends(page = 1) {
            $.ajax({
                url: 'src/getUserInfo.php',
                type: 'GET',
                data: {
                    from_user_id: <?php echo $_GET['from_user_id']; ?>, // Assuming the current user's ID is 1
                    page: page,
                    limit: 20 // Number of friends to load per page
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status === 'success') {
                        $('.friend-list').empty(); // Clear existing friend list

                        // Add search container
                        $('.friend-list').append(`
                            <div class="search-container">
                                <input type="text" id="friendSearch" placeholder="搜索好友" class="search-input">
                                <button id="searchButton" class="search-button">搜索</button>
                            </div>
                        `);

                        // Add public notification channel
                        $('.friend-list').append(`
                            <div class="friend-item">
                                <img src="statics/image/default-user.png" class="avatar" alt="好友头像">
                                <div class="friend-info" data-url="chat.php?from_user_id=1&to_user_id=0&user_name=公用&Avatar=https://pchat.jjsos.cn/headerimage/fba80786-929d-4f19-809b-8aba4ed73508">
                                    <strong>公共通知</strong>
                                    <span class="unread-count">${response.count} 条未读消息</span>
                                </div>
                            </div>
                        `);

                        // Add friends from the response
                        $.each(response.data, function(index, friend) {
                            $('.friend-list').append(`
                                <div class="friend-item">
                                    <img src="${friend.friend_header || 'statics/image/dynamic-user.png'}" class="avatar" alt="好友头像">
                                    <div class="friend-info" data-url="chat.php?from_user_id=1&to_user_id=${friend.friend_id}&user_name=${encodeURIComponent(friend.friend_name)}&Avatar=${encodeURIComponent(friend.friend_header)}">
                                        <strong>${friend.friend_name}</strong>
                                        <span class="unread-count">${friend.count} 条未读消息</span>
                                    </div>
                                </div>
                            `);
                        });

                        // Reattach click event to friend-info elements
                        $(".friend-info").click(function() {
                            window.location.href = $(this).data('url');
                        });


                        // Add "Load More" button if there are more friends to load
                        if (response.data.length === 20) { // Assuming 20 is the limit per page
                            $('.friend-list').append(`
                                <div class="load-more-container">
                                    <button id="loadMoreFriends" class="load-more-button">加载更多</button>
                                </div>
                            `);

                            // Attach click event to "Load More" button
                            $('#loadMoreFriends').click(function() {
                                page++; // Increment page number
                                loadFriends(page); // Load next page of friends
                            });
                        }




                        // Function to handle friend search
                        function searchFriends() {
                            var searchTerm = $("#friendSearch").val().toLowerCase();
                            $(".friend-item").each(function() {
                                var friendName = $(this).find("strong").text().toLowerCase();
                                if (friendName.includes(searchTerm)) {
                                    $(this).show();
                                } else {
                                    $(this).hide();
                                }
                            });
                        }

                        // Attach search functionality to search button and input
                        $("#searchButton").click(searchFriends);
                        $("#friendSearch").on('keyup', function(e) {
                            if (e.key === 'Enter') {
                                searchFriends();
                            }
                        });
                    } else {
                        console.error('Error loading friends:', response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX error:', error);
                }
            });
        }
        // Initial load of friends
        loadFriends();

        $(".friend-info").click(function() {
            window.location.href = $(this).data('url');
        });
        $("#searchButton").click(function() {
            swal("搜索", "正在搜索好友", "success");
            var searchTerm = $("#friendSearch").val().toLowerCase();
            $(".friend-item").each(function() {
                var friendName = $(this).find("strong").text().toLowerCase();
                if (friendName.includes(searchTerm)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>
</html>