[网页插件][更新] @提醒(1.0.4)

@Ta 2023-02-25发布,2023-03-31修改 102677点击
插件主要想解决的问题:@ 机器人 后不知道什么时候回复,避免麻烦的多次刷新查看。

导入网页插件:@消息提醒(当前用户:21,总安装次数:50)
<link rel="stylesheet" href="https://hu60.cn/q.php/api.webplug-file.9977_public_at_tip_alert_css.css">
<script src="https://hu60.cn/q.php/api.webplug-file.9977_public_at_tip.js"> </script>


1.0.4更新:socket失去连接是将背景色改为红色,提示用户。避免傻傻一直等待。

1.0.3 更新:
1.如果是在聊天室收到消息直接插入到聊天室中。并突出显示。目前的优点是直接获取的原始html,不会出现排版异常问题,可以100%还原代码展示效果。
2.增加呼吸灯是否展示提示。提示弹窗仅显示一次,可清空浏览器缓存恢复默认值。
3.优化代码,降低对浏览器消耗。

效果
image.png(513.41 KB)

1.0.2 更新:替换轮训接口为websocket,同时保留20秒轮训一次,以免socket崩溃时无法提示。

1.0.1 更新:左侧添加消息查看图标,点击后弹出@消息列表,同时将@消息设置为已读,并且将呼吸灯停止,当有新消息时呼吸灯会继续。避免每次都要重新点下私信消息。

回复列表(61|显示机器人聊天)
  • @Ta / 2023-02-25 / /
  • @Ta / 2023-02-25 / /
    @残缘,测试
  • @Ta / 2023-02-25 / /

    @罐子
    一加8Pro

  • @Ta / 2023-02-25 / /
    @残缘
  • @Ta / 2023-02-25 / /

    @残缘,老虎服务器负载会不会大增呀

  • @Ta / 2023-02-25 / /
    @无名啊,会,但是没有其他好方法,除非老虎给加一个websocket
  • @Ta / 2023-02-25 / /

    @残缘,php 适合加 websocket 吗?

  • @Ta / 2023-02-25 / /
    @无名啊,这个得看🐯了
  • @Ta / 2023-02-25 / /

    @残缘@老虎会游泳,刷新了页面还是一直闪(因为没去【提醒】那已读该新消息)

    能不能改成:若实际已看新回复,则自动已读该消息?

  • @Ta / 2023-02-25 / /
    @无名啊,这个得🐯来处理,但是我觉得逻辑有点复杂
  • @Ta / 2023-02-25 / /

    @残缘,可能需要每次查看帖子时,加一个【已读当前页面所有楼层】的操作

    我看了看 @老虎会游泳 的数据库,应该是 hu60_msg 表来记录消息提醒吧。

    如果没猜错的话,这个表的内容不是结构化的,需要遍历所有未读消息,解析 content 里的帖子和楼层,才决定要不要已读。。

  • @Ta / 2023-02-25 / /

    @残缘,从前端解决该问题很简单,在 localStorage 里记录一下当前新消息条数,只在条数增长的时候闪就行了。

  • @Ta / 2023-02-25 / /
    @老虎会游泳,这样会导致不会很准,比如我在另外一个页面刷新了,但是我其实还没看到这个消息。如果可能不准的话我就会手动刷新确定有没有消息,这样这个插件就失去意义了
  • @Ta / 2023-02-25 / /
    我让chatgpt改了插件实现了这个效果,但是似乎会改变林子回复框,让我看不见我输入的字符了,还能怎么优化一下吗?企业微信截图_16773285548380.png(128.18 KB)

    代码在https://hu60.cn/q.php/bbs.topic.69742.html?floor=71#71
  • @Ta / 2023-02-25 / /

    @残缘,哇哦,呼吸灯效果很炫呀。可有颜色选项?
    小米8(白)

  • @Ta / 2023-02-26 / /
    @旧人,以下是一个修改后的示例代码,它在用户单击查看消息按钮以后,不再监测新的消息提醒,直到用户关闭了查看消息的页面。在用户关闭查看消息的页面之后,才会重新开始监测新的消息提醒。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>新消息提醒</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <script>
            var messageShown = false;
            var messageModal;

            $(document).ready(function() {
                setInterval(checkNewMessage, 1000);
            });

            function checkNewMessage() {
                if (messageShown) {
                    return;
                }
                $.getJSON("/q.php/index.index.json", function(result) {
                    if (result['userInfo']['newAtInfo'] > 0 || result['userInfo']['newMsg'] > 0) {
                        showMessage(result['userInfo']['newAtInfo'], result['userInfo']['newMsg']);
                    }
                });
            }

            function showMessage(newAtInfo, newMsg) {
                messageShown = true;
                var message = "";
                if (newAtInfo > 0) {
                    message += "你有 " + newAtInfo + " 条新的@消息\n";
                }
                if (newMsg > 0) {
                    message += "你有 " + newMsg + " 条新的私信\n";
                }

                var modal = '<div class="modal fade" tabindex="-1" role="dialog">' +
                            '<div class="modal-dialog" role="document">' +
                            '<div class="modal-content">' +
                            '<div class="modal-header">' +
                            '<h5 class="modal-title">新消息提醒</h5>' +
                            '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                            '<span aria-hidden="true">&times;</span>' +
                            '</button>' +
                            '</div>' +
                            '<div class="modal-body">' +
                            message +
                            '</div>' +
                            '<div class="modal-footer">' +
                            '<a href="https://hu60.cn/q.php/[email protected]" class="btn btn-primary" target="_blank">查看消息</a>' +
                            '<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                messageModal = $(modal).modal('show');

                messageModal.on('hidden.bs.modal', function () {
                    messageShown = false;
                    $(this).remove();
                });
            }
        </script>
    </body>
    </html>
  • @Ta / 2023-02-26 / /
    @艾木友尔尔巴,现在是每次刷新随机选取温和的颜色
  • @Ta / 2023-02-26 / /
    @残缘,老哥可以看看28楼的插件吗
  • @Ta / 2023-02-26 / /
    @旧人,这个插件第一版就是弹窗,觉得不好看我就改了改😛
添加新回复
回复需要登录