关键词：
【中文标题】基于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 中的链接。这实际上是一个简化的骨架结构，而不是实际应用程序的方式即将开始。兄弟服务器发送的事件仅用于避免轮询，我已经考虑过它的工作使用gateway-worker实现多人分组实时聊天结合第三方tp
...础知识1、Workerman是一款纯PHP开发的开源高性能的PHPsocket服务器框架。被广泛的用于手机app、移动通讯等领域的开发。支持TCP长连接，支持Websocket、HTTP等协议，支持自定义协议。拥有异步Mysql、异步Redis、异步Http、异步消息队列... 查看详情
如何在多线程或基于 wcf 服务的应用程序中正确使用事件？
】如何在多线程或基于wcf服务的应用程序中正确使用事件？【英文标题】：Howcaniuseeventsproperlyinmulti-threadorwcfservice-basedapplications?【发布时间】：2016-08-1812:14:39【问题描述】：我有提供一些实时事件的设备，制造商给了我一个dll用... 查看详情
使用 HTML5 websockets 实现基于 web 的实时视频聊天
】使用HTML5websockets实现基于web的实时视频聊天【英文标题】：ImplementingwebbasedrealtimevideochatusingHTML5websockets【发布时间】：2011-05-1208:43:55【问题描述】：有谁知道如何使用HTML5websockets在web应用程序中通过IP实现语音/视频？如果我可... 查看详情
使用 Ratchet Websockets 进行 PHP 实时聊天
】使用RatchetWebsockets进行PHP实时聊天【英文标题】：PHPRealTimechatwithRatchetWebsockets【发布时间】：2016-05-0220:53:47【问题描述】：我是PHPWebsockets的初学者，我正在尝试使用数据库存储创建实时聊天。我做得很好，但现在我遇到了一个... 查看详情
基于webrtc开源框架的实时视频聊天项目，搭建私人实时通信服务(代码片段)
...等与他人交流。尽管任何WebRTC应用程序都使用4种类型的服务器：应用程序服务器-托管ConnectWeb应用程序！信令服务器-WebRTC信令是指建立、控制和终止通信会话的过程。为了让两个端点开始相互交谈，必须交换三种类... 查看详情
基于 JAXL 的聊天客户端。需要帮助连接到 Gtalk 或其他服务器以进行测试
】基于JAXL的聊天客户端。需要帮助连接到Gtalk或其他服务器以进行测试【英文标题】：JAXLbasedchatclient.NeedhelpconnectingtoGtalkorotherservertotest【发布时间】：2013-10-2013:09:41【问题描述】：我希望使用php向基于XMPP的聊天服务器发送消息... 查看详情
需要开发一个 PHP - 基于 Jabber 的聊天工具
】需要开发一个PHP-基于Jabber的聊天工具【英文标题】：NeedtodevelopaPHP-Jabberbasedchat【发布时间】：2012-04-1506:13:24【问题描述】：我正在尝试使用PHP开发基于Web的聊天系统。我使用jQuery和PHP的组合创建了一个，但此设置使用大量网... 查看详情
基于 Android 的实时聊天应用程序
】基于Android的实时聊天应用程序【英文标题】：Androidbasedlivechatapplication【发布时间】：2015-09-0904:24:25【问题描述】：我正在开发基于android的实时聊天应用程序。目前我正在使用quickbloxapi。有没有更好的api可用，如果它得到良好... 查看详情
使用 Python 和 websocket 创建实时聊天
...定如何将这些套接字保存到一个数组中，以便一旦用户向服务器发送消息，服务 查看详情
java网络编程基础---基于tcp的简单聊天系统
... 要实现消息的发送，客户端每次在连接服务器端时都需要告诉服务器自己的用户名，以便能够接收到发送给自己的消息。服务器端在接收到消息时，能够查到对应用户名的客户端，将消息发送给该客户端。 ... 查看详情
Django 频道实时聊天保存发送的消息
】Django频道实时聊天保存发送的消息【英文标题】：Djangochannelslivechatsavesentmessages【发布时间】：2020-10-1003:32:14【问题描述】：所以我有一个Django应用程序，我在其中使用频道来实现实时聊天。我的消费者看起来像这样：导入json... 查看详情
实时聊天、消息处理 - Socket.io、PHP、MySQL、Apache
...述】：我是Web开发的初学者。最近我一直在开发一个完全基于PHP和JS/jQuery的实时聊天网站（我没有使用任何框架）。目前，我的设置只是简单的AJAX轮询，这显然不如我想要的那么好 查看详情
聊天程序（基于socketthread）
聊天程序简述1、目的：主要是为了阐述Socket，以及应用多线程，本文侧重Socket相关网路编程的阐述。如果您对多线程不了解,大家可以看下我的上一篇博文浅解多线程 。2、功能：此聊天程序功能实现了服务端跟多个客户端之... 查看详情
使用python多进程进行基于websocket的实时视频流处理
...端发起，服务端对请求做出应答处理，HTTP协议无法实现服务器主动向客户端发起消息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常 查看详情
基于swoole的网页一对一实时聊天(代码片段)
需求分析网站上实现一对一即时沟通，能查看聊天记录以及离线留言，新消息提醒。核心技术html5的websocket，php的swoole扩展http://wiki.swoole.com/数据表CREATETABLE`msg`(`id`int(11)NOTNULLAUTO_INCREMENT,`content`varchar(255)NOTNULLDEFAULT‘‘COMMENT‘内容... 查看详情
更新实时网络聊天 php
...916:43:51【问题描述】：所以，我正在进行实时网络聊天（基于文件），所以我得到了这个文件chat_log.txt，当我在php中读取该文件时，我必须始终刷新以获取chat_log.txt内容。我需要我的代码是动态的并自我更新，以便它可以实时获... 查看详情
实时聊天：我都有哪些选择？ [关闭]
...构建的现有利基网站构建实时聊天组件。我们开始使用APE服务器，但遇到了与SSL支持相关的问题，并且那里的社区似乎反应迟钝。所以我开始评估替代解决方案。我正在寻找一种尽可能少依赖他人的 查看详情
使用 strophe js 在聊天中发送图像
...开发一个基于网络的聊天应用程序。我正在使用EjabberdXMPP服务器。我浏览了strophejs提供的插件，但我发现任何插件都可以发送/接收图像。我搜索了各种问题，但找不到任何完美的答案。如何使用strophejs将图像发送 查看详情