我正在尝试使用html服务器发送的事件在网站上构建实时聊天查询表单 I am following this tutorial as base for it
在客户端，系统会要求用户输入用户名。这用作唯一聊天记录识别的主键。
客户端和服务器通过监听以下php页面来侦听服务器发送的事件。
当客户端按发送按钮时，会将聊天发送到此php页面，该页面将其插入数据库并输出UserName
客户： var serverSource = new EventSource('ServerListener.php');
服务器： var clientSource= new EventSource('ClientListener.php');
这里有两个php文件，一个用于从客户端插入数据库聊天，另一个用于插入来自服务器的回复
当用户发送到chattoserver.php时，这两个文件还有另一个功能，它还通知服务器收到的新聊天以及搜索未读行的用户名并获取它并转移到聊天窗口
类似地，当服务器回复时，它被发送到chatreplyreceived.php，在那里它写入数据库并通知客户端。因此，如果多个客户端监听此文件。使用用户名读取消息正确的客户端可以搜索数据库以进行回复并附加到聊天记录。
这里的日期在两个列表器页面都正确显示，但是没有显示消息。文本文件包含发送的消息。当使用firefox网络分析工具检查数据包时。它包含响应部分中的刷新消息。但是列表管理员未能检测到它。我错误地表示消息没有被回复？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=text]').bind("enterKey",function(e){
//alert("Enter");
});
$('input[type=text]').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementsByTagName("h1").innerHTML = xmlhttp.responseText;
//alert("hello");
}
}
$('div.chat-box-content').append('<div class="clear"></div><span class="right">'+$(this).val()+ '</span>');
xmlhttp.open("GET", "ClientListener.php?Message='"+$(this).val()+"'" , true);
xmlhttp.send();
// xmlhttp.open("POST","ClientListener.php",true);
// xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// xmlhttp.send("Message='"+$(this).val()+"'");
}
});
}
);
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerListner.php");
source.onmessage = function(event) {
//alert("Data Received");
//alert(event.data);
//alert(document.getElementsByClassName("chat-box-content").innerHTML);
// document.getElementsByClassName("chat-box-content").innerHTML +='<div class="clear"></div><span class="left">'+event.data+ '</span> <br>';
//if(event.data !==''){
$('div.chat-box-content').append('<div class="clear"></div><span class="left">'+event.data+ '</span>');
//}
};
} else {
document.getElementById("chat-box-content").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
<style type="text/css">
body {
height:3000px
}
.chat-box {
font:normal normal 11px/1.4 Tahoma, Verdana, Sans-Serif;
color:#333;
width:200px;
/* Chatbox width */
border:1px solid #344150;
border-bottom:none;
background-color:white;
position:fixed;
right:10px;
bottom:0;
z-index:9999;
-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
}
.chat-box > input[type="checkbox"] {
display:block;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
left:0;
width:100%;
height:26px;
z-index:4;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.chat-box > label {
display:block;
height:24px;
line-height:24px;
background-color:#344150;
color:white;
font-weight:bold;
padding:0 1em 1px;
}
.chat-box > label:before {
content:attr(data-collapsed)
}
.chat-box .chat-box-content {
padding:10px;
display:none;
}
/* hover state */
.chat-box > input[type="checkbox"]:hover + label {
background-color:#404D5A
}
/* checked state */
.chat-box > input[type="checkbox"]:checked + label {
background-color:#212A35
}
.chat-box > input[type="checkbox"]:checked + label:before {
content:attr(data-expanded)
}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {
display:block
}
span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
left
{
float: left;
}
span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
input[type="text"]{
width:96%;
margin:1%;
}/*INSERT INTO `users`( `userRole`, `userName`, `createdOn`, `emailId`, `is_active`, `password`) VALUES (1,'admin_chat',NOW(),'sdmd@sdmd.com',1,'123456') ON DUPLICATE KEY */
</style>
</head>
<body>
<div class="chat-box">
<input type="checkbox" />
<label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
<div class="chat-box-content">
<span class="left">messmessage</span>
<div class="clear"></div>
<span class="right">messagemessagemessage</span>
<div class="clear"></div>
<span class="left">messagemessagsage</span>
<div class="clear"></div>
<span class="right">messagemessagemessage</span>
</div>
<input type="text" />
</div>
</body>
</html>
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
//header("refresh: 5;");
if (ISSET($_GET['Message'])) {
$msg =$_GET['Message'];
if(!empty($msg)){
$fp = fopen("_chat.txt", 'a');
fwrite($fp,$msg."\n\n");
fclose($fp);
}
echo "data: $msg\n\n";
flush();
}
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=text]').bind("enterKey",function(e){
//alert("Enter");
});
$('input[type=text]').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementsByTagName("h1").innerHTML = xmlhttp.responseText;
//alert("hello");
}
}
$('div.chat-box-content').append('<div class="clear"></div><span class="right">'+$(this).val()+ '</span>');
xmlhttp.open("GET", "ServerListner.php?Message='"+$(this).val()+"'" , true);
xmlhttp.send();
// xmlhttp.open("POST","ServerListner.php",true);
/// xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// xmlhttp.send("Message='"+$(this).val()+"'");
}
});
}
);
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ClientListener.php");
source.onmessage = function(event) {
//alert("Data Received");
alert(event.data);
//alert(document.getElementsByClassName("chat-box-content").innerHTML);
// document.getElementsByClassName("chat-box-content").innerHTML +='<div class="clear"></div><span class="left">'+event.data+ '</span> <br>';
// if(event.data!==''){
console.log(event.data);
$('div.chat-box-content').append('<div class="clear"></div><span class="left">'+event.data+ '</span>');
// }
};
} else {
document.getElementById("chat-box-content").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
<style type="text/css">
body {
height:3000px
}
.chat-box {
font:normal normal 11px/1.4 Tahoma, Verdana, Sans-Serif;
color:#333;
width:200px;
/* Chatbox width */
border:1px solid #344150;
border-bottom:none;
background-color:white;
position:fixed;
right:10px;
bottom:0;
z-index:9999;
-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
}
.chat-box > input[type="checkbox"] {
display:block;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
left:0;
width:100%;
height:26px;
z-index:4;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.chat-box > label {
display:block;
height:24px;
line-height:24px;
background-color:#344150;
color:white;
font-weight:bold;
padding:0 1em 1px;
}
.chat-box > label:before {
content:attr(data-collapsed)
}
.chat-box .chat-box-content {
padding:10px;
display:none;
}
/* hover state */
.chat-box > input[type="checkbox"]:hover + label {
background-color:#404D5A
}
/* checked state */
.chat-box > input[type="checkbox"]:checked + label {
background-color:#212A35
}
.chat-box > input[type="checkbox"]:checked + label:before {
content:attr(data-expanded)
}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {
display:block
}
span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
left
{
float: left;
}
span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
input[type="text"]{
width:96%;
margin:1%;
}/*INSERT INTO `users`( `userRole`, `userName`, `createdOn`, `emailId`, `is_active`, `password`) VALUES (1,'admin_chat',NOW(),'sdmd@sdmd.com',1,'123456') ON DUPLICATE KEY */
</style>
</head>
<body>
<div class="chat-box">
<input type="checkbox" />
<label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
<div class="chat-box-content">
<span class="left">messmessage</span>
<div class="clear"></div>
<span class="right">messagemessagemessage</span>
<div class="clear"></div>
<span class="left">messagemessagsage</span>
<div class="clear"></div>
<span class="right">messagemessagemessage</span>
</div>
<input type="text" />
</div>
</body>
</html>
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
//header("refresh: 3;");
if (ISSET($_GET['Message'])) {
$msg =$_GET['Message'];
if(!empty($msg)){
$fp = fopen("_chat.txt", 'a');
fwrite($fp,$msg."\n\n");
fclose($fp);
}
echo "data: $msg\n\n";
flush();
}
?>
答案 0 :(得分：0)
如果你现在想要根据你的方法获得信息这是错的，你应该看WebSockets API和Tutorial
然而，对于服务器系统来说，php是错误的语言，你必须让客户端轮询新信息，这不是真正的客户端服务器关系。
在客户端，要求用户输入用户名。这用作a 用于唯一聊天记录识别的主键。
这可能不正确主键永远不应该是相同的，因此如果您使用数据库，用户名不能是主键，大多数人在数据库中使用AUTO_INCREMENT键作为主键。
如果您使用jQuery，为什么使用原生XMLHttpRequest客户端而不是jQuery's XHR？
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementsByTagName("h1").innerHTML = xmlhttp.responseText;
//alert("hello");
}
}
$('div.chat-box-content').append('<div class="clear"></div><span class="right">'+$(this).val()+ '</span>');
xmlhttp.open("GET", "ClientListener.php?Message='"+$(this).val()+"'" , true);
xmlhttp.send();
在做某事之前，这个复杂的研究工作，更确定你能够使用你需要的语言。如果您还没有能够阅读本机JavaScript教程并了解如何将其转换为JavaScript框架，那么您还没有准备好使用它。