基于html5的sse推送实现在线聊天
HTML5 服务器推送事件（Server-sent Events） 利用html5的及时推送技术与php+mysql+ajax一些技术完成一款在线聊天室实例。sse推送默认为3秒时间，echo "retry:1000\n"来修改为1s，基础代码：
index.php
<?php
class TalkController{
private static $pdo = NULL;
public function __construct(){
if($_GET['a'] != 'login' && !isset($_SESSION['nickname'])){
header('Location:index.php?a=login');
}
if(is_null(self::$pdo)){
try{
$dsn = 'mysql:host=localhost;dbname=talk';
$pdo = new PDO($dsn, 'root', '', array(PDO::ATTR_PERSISTENT=>TRUE));
$pdo->query('SET NAMES UTF8');
self::$pdo = $pdo;
}catch(Exception $e){
die('connect error ...');
}
}
}
public function index(){
include './show.html';
}
public function get(){
header('Content-Type:text/event-stream');
header('Cache-Control:no-chache');
$sql = "select * from message order by time asc limit 15";
$result = self::$pdo->query($sql);
$rows = $result->fetchAll(PDO::FETCH_ASSOC);
foreach($rows as $v){
$time = date('H:i:s', $v['time']);
echo "data:[$time] <span style='color:#35EC3B;'>{$v['nickname']}</span>: {$v['content']}<br/>\n";
}
echo "retry:1000\n";//默认3秒
echo "\n\n";
ob_flush();
flush();
}
public function put(){
$content = htmlspecialchars($_POST['content']);
$time = time();
$nickname = $_SESSION['nickname'];
$sql = "INSERT INTO message(content, time, nickname) values('{$content}', {$time}, '{$nickname}')";
self::$pdo->exec($sql);
}
public function login(){
if(!empty($_POST)){
$_SESSION['nickname'] = htmlspecialchars($_POST['nickname']);
header('Location:index.php');
}
include './login.html';
}
}
session_start();
date_default_timezone_set('PRC');
$action = $_GET['a'] = isset($_GET['a']) ? htmlspecialchars($_GET['a']) : 'index';
$controller = new TalkController;
$controller->$action();
?>
login.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>SSE简易聊天演示</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{position: fixed;left: 50%;top: 50%;width: 300px;height:100px;margin-left: -150px;margin-top: -50px;}
input{height: 35px;line-height: 35px;padding: 0 10px;}
</style>
</head>
<body>
<div class="wrap">
<form action="" method="post">
<input type="text" name="nickname" id="" placeholder="输入昵称">
<input type="submit" value="加入聊天">
</form>
</div>
</body>
</html>
show.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>SSE简易聊天演示</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{position: fixed;left: 50%;top: 50%;width: 600px;height:400px;margin-left: -300px;margin-top: -200px;}
input{height: 35px;line-height: 35px;padding: 0 10px;}
#msg-div{height: 330px;width: 580px;padding:10px;background: #333;color: #fff;}
</style>
</head>
<body>
<div class="container">
<div id="msg-div">
</div>
<form action="javascript:;">
<input type="text" required name="message" id="" placeholder="">
<input type="submit" value="发送">
</form>
</div>
<script type="text/javascript" src="http://www.huarongyuemao.com.cn/templets/mask/js/jquery.js"></script>
<script type="text/javascript">
var evtSource;
function get(){
evtSource = new EventSource('index.php?a=get');
evtSource.onmessage = function(e){
$('#msg-div').html(e.data);
}
}
get();
$('form').submit(function(){
var input = $('input[name=message]');
var msg = input.val();
$.ajax({
type: 'post',
url:'index.php?a=put',
data:{content:msg}
});
input.val('');
})
</script>
</body>
</html>