[英]How to play sound when new message received (chat system)
每次收到消息时,我都会尝试发出通知声音。 我知道每次发送消息但未接收时如何实现它。 相关代码在这里。
javascript 中应该改变什么?
chat.php 是将播放声音的网站。
<?php
session_start();
include_once "php/config.php";
if(!isset($_SESSION['unique_id'])){
header("location: login.php");
}
?>
<?php include_once "header.php"; ?>
<body>
<div class="wrapper">
<section class="chat-area">
<header>
<?php
$user_id = mysqli_real_escape_string($conn, $_GET['user_id']);
$sql = mysqli_query($conn, "SELECT * FROM `users` WHERE `unique_id` = {$user_id}");
if(mysqli_num_rows($sql) > 0){
$row = mysqli_fetch_assoc($sql);
}else{
header("location: users.php");
}
?>
<a href="users.php" class="back-icon"><i class="fas fa-arrow-left"></i></a>
<img src="php/images/<?php echo $row['img']; ?>" alt="">
<div class="details">
<span><?php echo $row['fname']. " " . $row['lname'] ?></span>
<p><?php echo $row['status']; ?></p>
</div>
</header>
<div class="chat-box">
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="<?php echo $user_id; ?>" hidden>
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Realtime Chat App</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
users.php
<?php
session_start();
include_once "php/config.php";
if(!isset($_SESSION['unique_id'])){
header("location: login.php");
}
?>
<?php include_once "header.php"; ?>
<body>
<div class="wrapper">
<section class="users">
<header>
<div class="content">
<?php
$sql = mysqli_query($conn, "SELECT * FROM `users` WHERE `unique_id` = {$_SESSION['unique_id']}");
if(mysqli_num_rows($sql) > 0){
$row = mysqli_fetch_assoc($sql);
}
?>
<img src="php/images/<?php echo $row['img']; ?>" alt="">
<div class="details">
<span><?php echo $row['fname']. " " . $row['lname'] ?></span>
<p><?php echo $row['status']; ?></p>
</div>
</div>
<a href="php/logout.php?logout_id=<?php echo $row['unique_id']; ?>" class="logout">Logout</a>
</header>
<div class="search">
<span class="text">Select an user to start chat</span>
<input type="text" placeholder="Enter name to search...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="users-list">
</div>
</section>
</div>
<script src="javascript/users.js"></script>
</body>
</html>
javascript/users.js
const searchBar = document.querySelector(".search input"),
searchIcon = document.querySelector(".search button"),
usersList = document.querySelector(".users-list");
searchIcon.onclick = ()=>{
searchBar.classList.toggle("show");
searchIcon.classList.toggle("active");
searchBar.focus();
if(searchBar.classList.contains("active")){
searchBar.value = "";
searchBar.classList.remove("active");
}
}
searchBar.onkeyup = ()=>{
let searchTerm = searchBar.value;
if(searchTerm != ""){
searchBar.classList.add("active");
}else{
searchBar.classList.remove("active");
}
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/search.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
usersList.innerHTML = data;
}
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("searchTerm=" + searchTerm);
}
setInterval(() =>{
let xhr = new XMLHttpRequest();
xhr.open("GET", "php/users.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
if(!searchBar.classList.contains("active")){
usersList.innerHTML = data;
}
}
}
}
xhr.send();
}, 500);
javascript/chat.js
const form = document.querySelector(".typing-area"),
incoming_id = form.querySelector(".incoming_id").value,
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chat-box");
form.onsubmit = (e)=>{
e.preventDefault();
}
inputField.focus();
inputField.onkeyup = ()=>{
if(inputField.value != ""){
sendBtn.classList.add("active");
}else{
sendBtn.classList.remove("active");
}
}
sendBtn.onclick = ()=>{
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/insert-chat.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
inputField.value = "";
scrollToBottom();
var audio = new Audio("php/sounds/good_notification.mp3");
audio.play();
}
}
}
let formData = new FormData(form);
xhr.send(formData);
}
chatBox.onmouseenter = ()=>{
chatBox.classList.add("active");
}
chatBox.onmouseleave = ()=>{
chatBox.classList.remove("active");
}
setInterval(() =>{
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/get-chat.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
chatBox.innerHTML = data;
if(!chatBox.classList.contains("active")){
scrollToBottom();
}
}
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("incoming_id="+incoming_id);
}, 500);
function scrollToBottom(){
chatBox.scrollTop = chatBox.scrollHeight;
}
php/insert-chat.php
<?php
session_start();
if(isset($_SESSION['unique_id'])){
include_once "config.php";
$outgoing_id = $_SESSION['unique_id'];
$incoming_id = mysqli_real_escape_string($conn, $_POST['incoming_id']);
$message = mysqli_real_escape_string($conn, $_POST['message']);
if(!empty($message)){
$sql = mysqli_query($conn, "INSERT INTO `messages` (incoming_msg_id, outgoing_msg_id, msg)
VALUES ({$incoming_id}, {$outgoing_id}, '{$message}')") or die();
}
}else{
header("location: login.php");
}
?>
php/get-chat.php
<?php
session_start();
if(isset($_SESSION['unique_id'])){
include_once "config.php";
$outgoing_id = $_SESSION['unique_id'];
$incoming_id = mysqli_real_escape_string($conn, $_POST['incoming_id']);
$output = "";
$sql = "SELECT * FROM `messages` LEFT JOIN `users` ON users.unique_id = messages.outgoing_msg_id
WHERE (outgoing_msg_id = {$outgoing_id} AND incoming_msg_id = {$incoming_id})
OR (outgoing_msg_id = {$incoming_id} AND incoming_msg_id = {$outgoing_id}) ORDER BY `msg_id`";
$query = mysqli_query($conn, $sql);
if(mysqli_num_rows($query) > 0){
while($row = mysqli_fetch_assoc($query)){
if($row['outgoing_msg_id'] === $outgoing_id){
$output .= '<div class="chat outgoing">
<div class="details">
<p>'. $row['msg'] .'</p>
</div>
</div>';
}else{
$output .= '<div class="chat incoming">
<img src="php/images/'.$row['img'].'" alt="">
<div class="details">
<p>'. $row['msg'] .'</p>
</div>
</div>';
}
}
}else{
$output .= '<div class="text">No messages are available. Once you send message they will appear here.</div>';
}
echo $output;
}else{
header("location: login.php");
}
?>
该网站每 5 秒自动更新一次,因此它会更快地显示一条消息。
抱歉,我的意思是在你的 chat.js 文件中......
它看起来像这样:
xhr.onload = ()=>{
if(xhr.readyState !== undefined && xhr.readyState === 4){
if(xhr.status === 200){
inputField.value = "";
scrollToBottom();
var audio = new Audio("php/sounds/good_notification.mp3");
audio.play();
}
}
}
这只是即兴创作,未经测试,这就是我将其作为评论提交的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.