时间戳

首页 > 解决方案 > 每次特定用户在现有网站上发送消息时播放声音/通知

javascript - 每次特定用户在现有网站上发送消息时播放声音/通知

问题描述

我是具有聊天小部件的网站上的用户 - 用户可以与讲师聊天。

每次讲师发送消息时，我都希望收到音频通知（可选地，浏览器通知也很酷）。重要的是我要立即抓住这些，而且很容易错过。

注意：这是我每天都会使用的东西。我知道可以直接在控制台中运行代码，但这有点临时性，并且依赖于我在每次聊天会话期间成功添加它。

仅供参考 - 来自讲师的每条聊天消息的代码如下所示：

<ul ng-class="{'notEducator': 'xyz,shanetech' == undefined, 'notEducator': 'xyz,shanetech' == '', 'notEducator': 0 == - 1, 'educator': 0 >=0, 'me':'xyz' == 'abc', 'notMe':'xyz' != 'abc'}" class="chat ng-scope educator notMe" data-ng-repeat="k in previousMessages track by $index">

  <div class="main-msg-container xyz">

    <div ng-class="{'hideMsgContainer':'' == '0'}" class="msg-container_5e9871f3e6eee5732cee3a1c">

      <strong class="primary-font ng-binding">xyz</strong>

      <li class=" clearfix">
        <div class="chat-body clearfix">
          <div class="header">


            <small class="pull-right text-muted ng-binding">
              <span class="glyphicon glyphicon-time"></span>16-04-2020 07:55:47
            </small>
          </div>
          <p data-ng-bind-html="k.message | to_trusted" class="edu_message_5e9871f3e6eee5732cee3a1c">msg</p>
        </div>
      </li>
    </div>
  </div>
</ul>

我注意到与常规用户聊天消息相比的一个独特功能是标签中存在educator类。ul

从ng-class属性中获取的另一个区别：

'notEducator': -1 == - 1, 'educator': -1 >=0<- 我

notEducator': 0 == - 1, 'educator': 0 >=0<- 主机

标签： javascripthtmlangularjs

解决方案

假设您尝试在无法修改代码的 Web 应用程序上运行代码，例如 Zoom we 应用程序，这是一种非侵入式方法：

如果您尝试在 DOM 发生变化时触发浏览器通知，您可以使用 chrome 代码片段来实现。我猜您有一个容器元素，并且您希望在该容器节点发生更改并且最后一个子元素具有特定类来表示它是来自educator.

为了简化这个场景以便更容易理解，假设容器元素有一个类，并且其中messageList的消息有一个类educatoror student。所以我们想要做的是观察messageList节点上的变化。当发生变化时，我们想检查最后一个孩子messageList是否有一个educator. 如果是这样，我们就会触发浏览器通知。

由于问题相对模糊，我不会进入特定代码，但是为了在每次访问特定网址时在 chrome 中运行代码，您可以使用Chrome 代码片段（将代码片段保存在浏览器内存中以现在运行或稍后）和MutationObserver（当 DOM 节点发生变异时触发操作），也请查看此 GoogleDev 帖子。

干杯!

推荐阅读