[英]How to display notification based on the data retrieved using Server-Sent Events in HTML5
I'm a beginner in HTML5.我是 HTML5 的初学者。 Now I'm trying to display the number of rows in a table using HTML5 Server-Sent Events.
现在我正在尝试使用 HTML5 Server-Sent Events 显示表格中的行数。 I was able to get the number of rows and display it inside a div tag.
我能够获取行数并将其显示在 div 标签中。
Javascript Javascript
<script>
var evtSource = new EventSource("messages.php");
console.log("Inside 1");
console.log(evtSource);
evtSource.onmessage = function(e) {
var no_of_messages=e.data;
if(no_of_messages > 0)
{
$("#Messages").html(e.data);
}
else
{
$("#Messages").html(e.data);
}
I used a PHP script to get the rows from the table.我使用 PHP 脚本从表中获取行。
PHP PHP
<?php
date_default_timezone_set("America/New_York");
header("Content-Type: text/event-stream\n\n");
$counter = rand(1, 10);
while (1) {
// Every second, sent a "ping" event.
echo "event: ping\n";
$dbhost = 'localhost:3036';
$dbuser = 'root';
$dbpass = 'password';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT count(*) FROM messages';
mysql_select_db('apartment');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_assoc($retval))
{
$message_count=$row['count(*)'];
}
mysql_close($conn);
echo 'data: {"Messages": "' . $message_count . '"}';
echo "\n\n";
// Send a simple message at random intervals.
$counter--;
if (!$counter) {
echo 'data:' . $message_count . "\n\n";
error_log($message_count);
$counter = rand(1, 10);
}
ob_flush();
flush();
sleep(1);
}?>
Now, I want to display it as a notifications in the HTML page so that the user can see it as it pops up.现在,我想将它显示为 HTML 页面中的通知,以便用户可以在它弹出时看到它。
What I have done -我做了什么 -
<div style="height: 70px; width:100%;border-style: solid;
border-bottom-width:1px;border-color: #ccc" id="dashboard">
<div id="Messages"><button id="button" type="button">Number of Messages</button></div>
</div>
With the above HTML I can display the Number of Messages, but I want to -使用上面的 HTML,我可以显示消息数,但我想 -
1. Change the color of the button when number of messages is above 0 and the color of the button should change to Green from initial color Red. 1.当消息数大于0时更改按钮的颜色,按钮的颜色应从初始颜色红色变为绿色。
2. Is it possible to create a balloon like notification with this. 2.是否可以用这个创建一个像通知的气球。
To change the color you can use要更改颜色,您可以使用
if (no_of_messages > 0){
document.getElementById("button").style.background-color="red";
} else {
document.getElementById("button").style.background-color="green";
}
But I am not too sure what is meant by 'balloon like', I will update my answer if you might explain a little bit more.但是我不太确定“像气球一样”是什么意思,如果您可以多解释一点,我会更新我的答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.