登录 立即注册

首页 > 绿虎论坛 > 网页插件 (发帖)

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

作者: @Ta

时间: 2023-02-25发布,2023-03-31修改

点击: 167783

插件主要想解决的问题:@ 机器人 后不知道什么时候回复,避免麻烦的多次刷新查看。

导入网页插件:@消息提醒(当前用户:22,总安装次数:51)
<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|显示机器人聊天)』

1. @残缘
(/@Ta/2023-02-25 15:52//)

2. @残缘,测试
(/@Ta/2023-02-25 15:53//)

3.

@罐子
一加8Pro

(/@Ta/2023-02-25 16:25//)

4. @残缘
(/@Ta/2023-02-25 16:47//)

7.

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

(/@Ta/2023-02-25 16:51//)

8. @无名啊,会,但是没有其他好方法,除非老虎给加一个websocket
(/@Ta/2023-02-25 16:52//)

11.

@残缘,php 适合加 websocket 吗?

(/@Ta/2023-02-25 18:18//)

12. @无名啊,这个得看🐯了
(/@Ta/2023-02-25 18:41//)

17.

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

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

(/@Ta/2023-02-25 19:00//)

18. @无名啊,这个得🐯来处理,但是我觉得逻辑有点复杂
(/@Ta/2023-02-25 19:05//)

19.

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

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

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

(/@Ta/2023-02-25 19:14//)

20.

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

(/@Ta/2023-02-25 19:15//)

21. @老虎会游泳,这样会导致不会很准,比如我在另外一个页面刷新了,但是我其实还没看到这个消息。如果可能不准的话我就会手动刷新确定有没有消息,这样这个插件就失去意义了
(/@Ta/2023-02-25 19:46//)

24. 我让chatgpt改了插件实现了这个效果,但是似乎会改变林子回复框,让我看不见我输入的字符了,还能怎么优化一下吗?企业微信截图_16773285548380.png(128.18 KB)

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

27.

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

(/@Ta/2023-02-25 23:54//)

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

<!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 00:11//)

29. @艾木友尔尔巴,现在是每次刷新随机选取温和的颜色
(/@Ta/2023-02-26 10:23//)

36. @残缘,老哥可以看看28楼的插件吗
(/@Ta/2023-02-26 15:01//)

37. @旧人,这个插件第一版就是弹窗,觉得不好看我就改了改😛
(/@Ta/2023-02-26 16:21//)

下一页 1/4页,共61楼

回复需要登录

11月17日 02:05 星期天

本站由hu60wap6华为CPU驱动

备案号: 京ICP备18041936号-1