基于PHP的查询实时聊天使用服务器发送的事件。（多对一系统不是群聊）
Posted
技术标签:
【中文标题】基于PHP的查询实时聊天使用服务器发送的事件。（多对一系统不是群聊）【英文标题】：Php Based enquiry real time chat using server sent events.(Many to one system Not group chat) 【发布时间】：2015-12-17 12:39:55 【问题描述】：我正在尝试使用 html 服务器发送的事件在网站中构建实时聊天查询表单。I am following this tutorial as base for it
这是我打算根据本教程做的事情
在客户端要求用户输入用户名。这用作唯一聊天日志标识的主键。
客户端和服务器通过监听以下php页面来监听服务器发送的事件。
当客户端按下发送按钮时，聊天被发送到这个 php 页面，该页面将其插入数据库并输出用户名
客户： var serverSource = new EventSource('ServerListener.php');
服务器： var clientSource= new EventSource('ClientListener.php');
这里有两个 php 文件，一个用于从客户端插入到数据库聊天中，另一个用于插入以从服务器回复
当用户发送到chattoserver.php 时，这两个文件还有另一个功能，它还会通知服务器收到的新聊天以及用户名，它会搜索未读行并获取它并附加到聊天窗口
同样，当服务器回复时，它被发送到chatreplyreceived.php，它在其中写入数据库并通知客户端。因此，如果有多个客户端监听此文件。使用用户名读取消息正确的客户端可以搜索数据库以进行回复并附加到聊天日志。
这里的日期在两个列表页面中都正确显示，但未显示消息。文本文件包含发送的消息。使用 firefox 网络分析工具检查数据包时。它在响应部分包含已清除的消息。但是侦听器未能检测到它。我做错了什么消息没有被回显？
ServerChatpage
ClientChatpage
ClientTest.php
<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>
ClientListener.php
<?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();
?>
ServerTestPage.php
<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();
?>
【问题讨论】：
你有没有想过使用 websockets 进行实时更新？ 没有？ @ChrisBeckett 我们不能使用 SSE 进行实时更新 @SachinDivakar 您可以使用 SSE 进行实时更新，但是如果您查看问题中链接的教程，则需要一些时间才能完成。如果您要使用 websockets，则花费的时间要快得多。 websocket 示例：socketo.me/demo。如果有任何错误可以显示您遇到的问题，您还可以显示来自console.log 的任何错误吗？
@SachinDivakar 如果有任何问题，请尽管问:)
Chris beckett 令人费解的是没有记录错误。我编写聊天以进行测试的文件包含所有聊天，但之后没有发生任何事情，但使用当前日期自动刷新页面时同样的事情工作正常但是当一些时不起作用而且我之前和之后已经阅读过 HTML5rocks 只有我开始为这个应用程序编写代码
【参考方案1】：
如果您现在想要基于您的方法的信息，这是错误的，您应该查看 WebSockets API 和 Tutorial
然而，对于服务器系统来说，php 是错误的语言，因为你必须让客户端轮询新信息，其次这不是真正的客户端服务器关系
在客户端要求用户输入用户名。这用作 唯一聊天记录标识的主键。
这是不正确的，主键永远不应该相同，因此如果您使用数据库，用户名不能作为主键，大多数人在数据库中使用 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 框架，那么您还没有准备好使用它。
【讨论】：
兄弟我是为一个最大同时查询（聊天）非常小的小型网站做的。所以 php 现在就足够了。兄弟我已经考虑过 Db 和其他事情这太复杂了写下来我用一个简单的实现把这一切都省略了。我被卡住的是当聊天被发送到它接收并写入日志文件以用于调试目的的 php 页面时，但是当输出流被刷新时，即使在检查请求响应时也没有任何反应包含 是的，阅读了客户端没有从任何它期望收到的消息中读取消息的代码，它不会处理特定客户端未发送的任何内容，这就是我给出这个答案的原因。 所以兄弟只做一件事我已经注释掉了几行 header('refresh');也只是回显当前服务器时间它正常工作，如thewebby.net16.net/TheWebby/ClientTestPage.php和thewebby.net16.net/TheWebby/ServerTestPage.php中所示 所以它应该去：客户端->发送消息到服务器->服务器保存消息->另一个客户端->请求消息->服务器加载新消息并将它们发送回客户端客户端然后处理显示他们 兄弟它不是关于我担心它在侦听器客户端页面上未收到刷新输出的实现，请查看 cmets 中的链接。这实际上是一个简化的骨架结构，而不是实际应用程序的方式即将开始。兄弟服务器发送的事件仅用于避免轮询，我已经考虑过它的工作以上是关于基于PHP的查询实时聊天使用服务器发送的事件。（多对一系统不是群聊）的主要内容，如果未能解决你的问题，请参考以下文章