如何在ConverseJS中实现全屏+Facebook式聊天弹窗功能？

核心思路 #

利用ConverseJS的事件系统和视图实例化API，在点击聊天项时额外创建独立的弹窗聊天视图，同时保留全屏模式下的原有聊天框——两者共享同一个聊天模型，天然同步消息状态。

具体实现步骤 #

1. 监听聊天打开事件并创建弹窗 #

在ConverseJS初始化完成后，监听chatBoxOpened事件，判断当前为全屏模式时，自动生成绑定同一聊天模型的弹窗：

converse.listen.on('chatBoxOpened', function (chatbox) {
    // 仅在全屏模式下执行逻辑
    if (converse.settings.view_mode !== 'fullscreen') return;
    // 避免重复创建同一聊天的弹窗
    const popupId = `popup-chat-${chatbox.get('jid')}`;
    if (document.getElementById(popupId)) return;

    // 创建弹窗容器
    const popupContainer = document.createElement('div');
    popupContainer.id = popupId;
    popupContainer.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: ${20 + (document.querySelectorAll('[id^="popup-chat-"]').length * 370)}px;
        width: 350px;
        height: 500px;
        border-radius: 8px;
        overflow: hidden;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    `;
    document.body.appendChild(popupContainer);

    // 实例化聊天视图并绑定到弹窗
    const popupChatView = new converse.ChatBoxView({
        model: chatbox,
        el: popupContainer
    });
    popupChatView.render();

    // 添加弹窗关闭按钮
    const closeBtn = document.createElement('button');
    closeBtn.textContent = '×';
    closeBtn.style.cssText = `
        position: absolute;
        top: 10px;
        right: 12px;
        border: none;
        background: transparent;
        font-size: 18px;
        cursor: pointer;
        color: #666;
    `;
    closeBtn.addEventListener('click', () => popupContainer.remove());
    popupContainer.appendChild(closeBtn);
});

2. 同步聊天状态 #

由于弹窗和全屏聊天框绑定的是同一个ChatBox模型，消息发送、接收、已读状态会自动同步，无需额外编写同步逻辑。

3. 封装为插件（可选） #

如果需要复用功能，可将上述逻辑封装为ConverseJS插件，初始化时启用即可：

converse.plugins.add('dual-chat-mode', {
    initialize: function () {
        const _converse = this._converse;
        _converse.listen.on('chatBoxOpened', function (chatbox) {
            if (_converse.settings.view_mode !== 'fullscreen') return;
            const popupId = `popup-chat-${chatbox.get('jid')}`;
            if (document.getElementById(popupId)) return;

            const popup = document.createElement('div');
            popup.id = popupId;
            popup.className = 'converse-chatbox';
            popup.style.cssText = `
                position: fixed;
                bottom: 20px;
                right: ${20 + (document.querySelectorAll('[id^="popup-chat-"]').length * 370)}px;
                width: 350px;
                height: 500px;
                z-index: 1000;
            `;
            document.body.appendChild(popup);

            const view = new _converse.ChatBoxView({model: chatbox, el: popup});
            view.render();

            // 添加关闭按钮到聊天头部
            view.el.querySelector('.converse-chatbox-header').insertAdjacentHTML('afterbegin', `
                <button class="popup-close" style="float:right; border:none; background:none; cursor:pointer; font-size:16px; margin-right:8px;">×</button>
            `);
            view.el.querySelector('.popup-close').addEventListener('click', () => popup.remove());
        });
    }
});

初始化时启用插件：

converse.initialize({
    view_mode: 'fullscreen',
    plugins: ['dual-chat-mode'],
    // 其他配置项...
});

注意事项 #

• 建议使用ConverseJS v8.x及以上版本，确保ChatBoxView可直接实例化；
• 如需支持群组聊天，可扩展逻辑监听groupChatBoxOpened事件，复用相同弹窗创建逻辑；
• 可根据需求调整弹窗的位置、大小样式，或添加拖拽功能优化体验。

内容的提问来源于stack exchange，提问作者Abdulla Ahmad