本文實例講述了JS(jQuery)實現聊天接收到消息語言自動提醒功能。分享給大家供大家參考，具體如下：
綜述
最近在開發一個網頁端的客服系統，需求要求聊天雙方接收到消息能有語音提醒，并且客服端如果存在未讀消息要求每隔五分鐘給客服語音提醒一下。客服聊天系統使用PHP的Workerman框架進行開發，由于語音提醒實現的功能一樣，故而在本篇博文中從簡描述，只進行定時循環提醒的功能記錄，不說實時的那個語音提醒，因為思路都是一樣的，主要是看如何實現自動播放語音功能。
思路
實時提醒
這個就比較明確了，就是在接收到消息的同時進行語音播放，大家可以根據自己的邏輯進行將代碼放到合適的地方。
定時提醒
這個主要首先判斷客戶是否存在未讀的消息，如果存在則語音提醒，如果不存在，則不進行提醒。故而要在HTML頁面寫一個定時器，每五分鐘訪問一次接口，查詢客服是否存在未讀消息，然后在后臺開發一個接口用于返回客戶是否存在未讀消息。
代碼實現
!--=======================================-->
!--Created by ZHIHUA·WEI.-->
!--Author: Wei ZhiHua-->
!--Date: 2019/01/09-->
!--Time: 下午 17:26-->
!--Project: ZHIHUA·WEI-->
!--Power:JS實現聊天接收到消息語言自動提醒-->
!--=======================================-->
!DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>JS實現聊天接收到消息語言自動提醒(您有新的消息請注意查收)/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結構部分-->
div style="width: 100%;text-align: center">
!--用來存放item-->
h1>JS實現聊天接收到消息語言自動提醒/h1>
h3>(您有新的消息請注意查收)/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檢測未讀消息，每五分鐘
var setTime = setInterval(function () {
$.ajax({
type: "post",
url: "{:url('index/getNoReadMsg')}", //查詢客服是否有未讀消息
dataType: "json",
success: function (ret) {
if (ret.code == 1) {
//有則進行播放語音提醒
$('#audioPlay')[0].play();
}
}
});
}, 300000);
});
$("#btn_audio").click(function () {
//這就代碼就是播放語音的關鍵代碼
$('#audioPlay')[0].play();
});
/script>
/html>
下載
本源碼包文件我已經上傳到資源庫中，有需要的童鞋可以自行下載，里面包含代碼和音頻文件。
完整實例代碼點擊此處本站下載。
之后將代碼中相應的資源路徑修改之后即可使用。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:- NodeJS 實現多語言的示例代碼
- Thinkphp搭建包括JS多語言的多語言項目實現方法
- 實例說明js腳本語言和php腳本語言的區別
- 易語言調用JS取隨機數
- 易語言調用JS代碼方法總結
- Go語言的JSON處理詳解
- 使用Go語言解析動態JSON格式的方法
- JS如何在不同平臺實現多語言方式
