Question

在我建立的HTML5网站中，我没有使用移动电话的应用程序，我实施了一个聊天框系统。用户编写消息然后使用AJAX页面加载带有消息的div。消息存储在mysql数据库中，并按顺序显示DESC。

我检查了https://stackoverflow.com/并看到了Ruby或PHP中的应用程序解决方案（使用Comet，socket.io，Sinatra和NODE.JS之上的其他一些方法），但这不是我想要的。< / p>

我希望每次聊天用户提交消息时都使用普通的PHP和Javascript通知来显示通知。

问题是通知有效，但只出现在编写邮件的用户的计算机上。其他打开浏览器的用户（Chrome）以及带聊天系统的标签中的其他用户都看不到该通知，因为它没有显示。

我的问题和问题是：是否可以在通过聊天框系统浏览的所有主持人中显示通知？

这是我的JAVASCRIPT代码，用于抓取用户消息并在HTML div中显示它们。出现在底部的Toast通知JS被评论和禁用，因此它不能用于我想做的事情。

function submitChat(){
    if(form1.uname.value == '' || form1.msg.value == ''){
        alert('Todos os campos são necessários.');
        return;
    }
    var uname = form1.uname.value;
    var msg = form1.msg.value;
    var xmlhttp = new XMLHttpRequest();

// HTML5 notification API

function showNotification() {
    var notification = new Notification(uname1.value + ' ' + 'diz:', {
        dir: "auto",
        lang: "",
        body: msg1.value,
        tag: "sometag",
    });
    setTimeout(function() {
        notification.close();
    }, '3000');

    // notification.onclose = …
    // notification.onshow = …
    // notification.onerror = …
}
// document.querySelector("#submeter").onclick = showNotification;

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
        // chama a função de notificação
        showNotification();
        // após submit limpa o campo da mensagem
        form1.msg.value = '';
    }
}
xmlhttp.open('GET', 'insert.php?uname='+uname+'&msg='+msg, true);
xmlhttp.send();
}

/* JQUERY */
$(document).ready(function(e){
    $.ajaxSetup({cache:false});
    setInterval(function() {$('#chatlogs').load('logs.php');}, 500);

    /* toast notification system */
    /* web/toast */
    /* configurar CSS e JS folders em AppAsset.php */
    /*
    $('#submeter').click(function(s){
        $.toast({
            text: msg1.value,
            heading: uname1.value,
            position: 'top-right',
            icon: 'success',
            showHideTransition: 'plain',
            bgColor: '#5cb85c',
            textColor: '#000'
        });
    });
    */
});

以下是HTML5部分：

<body>
<h3>Chat Room</h3>
<br/>
<form name="form1" id="form1">

    <div class="col-xs-12">
        <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">Username:</span>
            <input type="text" class="form-control" aria-describedby="basic-addon1" placeholder="" id="uname1" name="uname" readonly value="<?= Yii::$app->user->identity->username; ?>">
        </div>
    </div>

    <br/><br/><br/>

    <div class="col-xs-12">
        <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">Mensagem:</span>
            <textarea class="form-control" rows="3" name="msg" id="msg1"></textarea>
        </div>
    </div>

    <br/><br/><br/><br/><br/>

    <a href="#" onclick="submitChat()" class="btn-sm btn-success" id="submeter">Enviar</a><br/><br/>

    <div id="chatlogs">
        A carregar... Por favor espere...
    </div>

</form>
</body>

以下是PHP部分：

<?php
$con = new mysqli("localhost","root","root","efansredes");
$results=$con->query("SELECT * FROM chat ORDER by id DESC");

$i = 0;

while($row=$results->fetch_array()){
    if($i %2 == 0)
    {
      $class = 'even';
    }
    else
    {
      $class = 'odd';
    }
    $i++;

// output da tabela
echo '<div class="alert alert-success" role="alert">';
echo "<table>";
echo "<tr class='$class'>";
echo "<td>"."<b>".$row["username"]."</b>".": ".$row["msg"]."</td>";
echo "</tr>";
echo "</table>";
echo "</div>";
}

?>

Answer 1

请注意，您没有检查是否有通知。

showNotification();

您只是在用户向服务器发送消息后调用该函数来显示通知。在这种情况下，您需要使用Ajax请求进行long polling技巧，等待通知和您想要的任何内容。在长轮询的PHP中，如果有未读消息，您将在聊天数据库中检查 - 例如，长轮询可以使用echo中的某些数据停止，如果您愿意，它可以回显消息数据。 / p>

然后，您必须有一种方法来了解未读消息。假设您将通过聊天中最后一条消息中捕获的最后一个ID发现未读消息 - 然后，在数据库中，只能通过比其他ID更大的ID来获取消息。然后你可以计算你得到的消息行数。如果couting数字大于0，那么长轮询必须停止（有或没有结果）。

当长轮询停止（或给出响应）时，XMLHttpRequest结束 - 当它结束时是因为有未读消息。然后你可以在那里做点什么。

但是，如果您的服务器中有完整的shell，则不应使用Ajax，而应使用WebSockets。

网站使用普通的PHP和Javascript Notify System

1 个答案: