JS(jQuery)實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒功能詳解【提示“您有新的消息請(qǐng)注意查收”】

更新時(shí)間：2019年04月16日 11:10:09 作者：Zhihua_W

這篇文章主要介紹了JS(jQuery)實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript結(jié)合ajax后臺(tái)交互實(shí)現(xiàn)信息語音提示功能相關(guān)原理與操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS(jQuery)實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒功能。分享給大家供大家參考，具體如下：

綜述

最近在開發(fā)一個(gè)網(wǎng)頁端的客服系統(tǒng)，需求要求聊天雙方接收到消息能有語音提醒，并且客服端如果存在未讀消息要求每隔五分鐘給客服語音提醒一下。客服聊天系統(tǒng)使用PHP的Workerman框架進(jìn)行開發(fā)，由于語音提醒實(shí)現(xiàn)的功能一樣，故而在本篇博文中從簡(jiǎn)描述，只進(jìn)行定時(shí)循環(huán)提醒的功能記錄，不說實(shí)時(shí)的那個(gè)語音提醒，因?yàn)樗悸范际且粯拥?，主要是看如何?shí)現(xiàn)自動(dòng)播放語音功能。

思路

實(shí)時(shí)提醒

這個(gè)就比較明確了，就是在接收到消息的同時(shí)進(jìn)行語音播放，大家可以根據(jù)自己的邏輯進(jìn)行將代碼放到合適的地方。

定時(shí)提醒

這個(gè)主要首先判斷客戶是否存在未讀的消息，如果存在則語音提醒，如果不存在，則不進(jìn)行提醒。故而要在HTML頁面寫一個(gè)定時(shí)器，每五分鐘訪問一次接口，查詢客服是否存在未讀消息，然后在后臺(tái)開發(fā)一個(gè)接口用于返回客戶是否存在未讀消息。

代碼實(shí)現(xiàn)

<!--=======================================-->
<!--Created by ZHIHUA·WEI.-->
<!--Author: Wei ZhiHua-->
<!--Date: 2019/01/09-->
<!--Time: 下午 17:26-->
<!--Project: ZHIHUA·WEI-->
<!--Power:JS實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒-->
<!--=======================================-->
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>JS實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒(您有新的消息請(qǐng)注意查收)</title>
  <!--引入CSS、JS-->
  <script type="text/javascript" src="public/common/js/jquery-1.8.1.min.js"></script>
</head>
<style>
  #audio_click {
    margin-top: 32px;
    height: 40px;
  }
  #audio_click a {
    text-decoration: none;
    background: #2f435e;
    color: #f2f2f2;
    padding: 10px 30px 10px 30px;
    font-size: 16px;
    font-family: 微軟雅黑, 宋體, Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    border-radius: 3px;
    -webkit-transition: all linear 0.30s;
    -moz-transition: all linear 0.30s;
    transition: all linear 0.30s;
  }
  #audio_click a:hover {
    background: #385f9e;
  }
</style>
<body>
<!--dom結(jié)構(gòu)部分-->
<div style="width: 100%;text-align: center">
  <!--用來存放item-->
  <h1>JS實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒</h1>
  <h3>(您有新的消息請(qǐng)注意查收)</h3>
  <div id="audio_click">
    <a id="btn_audio" href="#" rel="external nofollow" >播放語音</a>
  </div>
  <div id="audio_play"></div>
</div>
</body>
<script>
  $(function () {
    var html = '';
    html += '<audio id="audioPlay">';
    //格式ogg音頻地址
    html += '<source src="/public/static/layui/newmsg.ogg" type="audio/ogg">';
    //格式mp3音頻地址
    html += '<source src="/public/static/layui/newmsg.mp3" type="audio/mpeg">';
    //格式wav音頻地址
    html += '<source src="/public/static/layui/newmsg.wav" type="audio/wav">';
    html += '</audio>';
    //將代碼寫入到頁面中
    $(html).appendTo("#audio_play");
    //輪詢ajax檢測(cè)未讀消息，每五分鐘
    var setTime = setInterval(function () {
      $.ajax({
        type: "post",
        url: "{:url('index/getNoReadMsg')}", //查詢客服是否有未讀消息
        dataType: "json",
        success: function (ret) {
          if (ret.code == 1) {
            //有則進(jìn)行播放語音提醒
            $('#audioPlay')[0].play();
          }
        }
      });
    }, 300000);
  });
  $("#btn_audio").click(function () {
    //這就代碼就是播放語音的關(guān)鍵代碼
    $('#audioPlay')[0].play();
  });
</script>
</html>

下載

本源碼包文件我已經(jīng)上傳到資源庫中，有需要的童鞋可以自行下載，里面包含代碼和音頻文件。

完整實(shí)例代碼點(diǎn)擊此處本站下載。

之后將代碼中相應(yīng)的資源路徑修改之后即可使用。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: