一个server-send events的小demo，后端用php实现

最新推荐文章于 2024-04-26 10:50:00 发布
最新推荐文章于 2024-04-26 10:50:00 发布
阅读量145 收藏
点赞数
文章标签： php 后端 javascript ViewUI
原文链接：http://www.cnblogs.com/vanillalyx/archive/2012/08/03/2621896.html
版权 
<!DOCTYPE html>
<html>
<head>
 	<title>server-sent event test</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
</head>
<body>
    <p> Chat System </p>
	<ul id="chat_list"></ul>
	<label>Name</label>
	<input id="chat_name" />
	<input id="chat_input" />
	<button οnclick="sendData()">发送</button>
</body>
<script  type="text/javascript" >
	var bConnected = false;

	function sendData() {
		var name = document.getElementById("chat_name").value;
		if (!name) {
			return alert("plz input your name");
		}
		if (!bConnected) {
			document.getElementById("chat_name").disabled = true;
			bConnected = true;
			connect();
		}
		var data = document.getElementById("chat_input").value;
		if (data) {
			jQuery.ajax("chat.php?type=chat&data=" + escape(data) + "&name=" + escape(name), {
				cache: false,
				type: "GET",
				success: function(data) {
				},
				error: function(xhr, errorstatus, errorthrow) {
					console.log(errorthrow);
				}
			});
		}
	}

	function connect() {
		var name = document.getElementById("chat_name").value;
		if (!name) {
			return alert("plz input your name");
		}
		var eventSrc = new EventSource('chat.php?type=eventResource&name=' + escape(name));
		console.log("add event success");

		eventSrc.addEventListener('open', function(event) {
		});

		eventSrc.addEventListener('message', function(event) {
			
			if (event.type == "message") {
				var msg = document.createElement("li");
				if(!event.data)return;
				msg.innerHTML = event.data;
				document.getElementById("chat_list").appendChild(msg);
			}
		});
	};
</script>
</html>

　　chat.html

<?php

$filename = 'chat.txt';

if($_GET['type'] == 'chat'){
	getMsg();
}else{
	$msg = file_get_contents($filename);
	file_put_contents($filename, '');
	$msg = $msg?$msg:'';	
	dispatchMsg($msg);

}

function getMsg(){
	$msg = $_GET['data'];	
	file_put_contents('chat.txt', $msg);
}


function dispatchMsg($msg){	
	header("Content-Type:text/event-stream");
	echo "data: " . $msg  . "\r\n\r\n";
	
}


?>

　　chat.php

 

具体文章参考： http://www.fanjun.me/?tag=server-sent-events

 

 

 

转载于:https://www.cnblogs.com/vanillalyx/archive/2012/08/03/2621896.html

weixin_30596735
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 html5 服务器发送事件(Server-Sent Events)，消息事件
John_jian_yo的博客
07-17 902
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。 浏览器支持 所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。 接收 Server-Sent 事件通知 EventSource 对象用于接收服务器发送事件通知： 实例
Server-Send-Event (SSE) 技术在单服务多实例副本上的实现
Java技术攻略的博客
04-23 877
在项目迭代的过程中，有些业务场景，比如客户端（浏览器）需要定期的获取后端的数据，一般比较常规的方式是通过客户端 long polling 的方式。除了这种方式外，还可以通过 Server-Send-Event（SSE）或者 WebSocket 的方式，更加实时的获取后端的数据。SSE是流式单工的（服务端 -> 客户端）基于 HTTP 协议 （很重要）适合客户端监听，服务端主动推消息的场景，如获取日志信息，获取通知消息等WebSocket是流式双工的（服务端 客户端）
Server-Sent Events和WebSocket服务器向浏览器推送信息
qq_25072517的博客
11-08 1235
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。本文介绍它的用法。 一、SSE 的本质 严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。 也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发
java h5服务器推送事件_H5的服务器推送事件详解
weixin_35135480的博客
03-01 313
这次给大家带来H5的服务器推送事件详解，服务器推送事件的注意事项有哪些，下面就是实战案例，一起来看一下。服务器推送事件(Server-sent Events)是基于WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯。目前所有主流浏览器均支持服务器发送事件，当然除了 Internet Explorer 。2333...WebSocket 协议是继HTTP协议后又一服务器客户...
第十三节 html5学习——服务器发送事件
语帆的专栏
01-20 471
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 例子：Facebook/Twitter 更新、估价更新、新的博文、赛事
HTML5服务器发送事件(Server-Send Events)
adiking520110的博客
11-20 193
HTML5服务器发送事件是允许获得来自服务器的更新。 server-sent事件-单向传递消息，表示网页自动获取来自服务器的更新。 其中有一个重要的对象，eventsource对象是用来接收服务器发送事件的通知。 实例： <!DOCTYPE html><html><head> <meta http-equiv="Content-Ty...
服务端推送技术 Server-sent Events 快速上手
码农小胖哥
08-22 3541
1. 前言 今天项目经理交给我一个开发任务。如果有人下了订单就给后台一个通知，也就是服务器推送功能。这个需求不是很复杂就一个通知功能，如果我用websocket来做还要搞个websocket服务器，而且还有不少配置。websocket是全双工通信，单向通信简直是杀鸡用牛刀。用轮询吧，浪费服务器资源不说，还不一定实时，订单处理慢了岂不是怠慢了客户。有没有别的选择呢？当然有！ 2. SSE推送技术...
项目完整上线流程-后端
weixin_46816552的博客
12-12 573
项目完整上线流程-后端
C++后端开发（4.5.1）——Nginx反向代理与系统参数配置conf
weixin_43687811的博客
03-18 3404
C++后端开发（49）——Nginx反向代理与系统参数配置
TP6 + think-swoole 实践（二）
weixin_43844995的博客
12-06 2177
swoole 在 TP 中的用法大概可以归为三类：listen（监听）、subscribe（订阅）、task（任务）。先说一下 listen 和 subscribe，这两种也是各种教程上出现最频繁的。 这三类用法，本质上都是使用 TP6 的“事件”实现的。简单的来说，就是我们先定义一些事件，然后注册listen监听或者subscribe订阅事件（在event.php中），之后就可以通过内部调用来触发事件了。 // 触发UserLogin事件 Event::trigger('UserLogin'); // 或
Server-Sent Events — JavaScript 标准参考教程（alpha）
不知名的研发小码农
10-12 213
文章目录[隐藏]Server-Sent Events Server-Sent Events 来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录1 “. “简介2 “. “与 WebSocket 的比较3 “. “客户端 API1 “.” counter(h3) “　”EventSource 对象2 “.” counter(h3) “　”readyState 属性3 “.” ...
Server-Sent Events 一种轻量级的Push方式
徐小陌的博客
07-31 2630
Server-Sent Events 一种轻量级的Push方式。
HTML5 服务器发送事件(Server-Sent Events)
山水子农
06-28 1443
1、HTML5 服务器发送事件(Server-Sent Events)   HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 2、Server-Sent 事件 - 单向消息传递   Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子
Server-Sent Events 教程
最新发布
あいうえお
04-26 254
默认情况下，服务器发来的数据，总是触发浏览器实例的message事件。开发者还可以自定义 SSE 事件，这种情况下，发送回来的数据不会触发message事件。}, false);上面代码中，浏览器对 SSE 的foo事件进行监听。如何实现服务器发送foo事件，请看下文。
服务端实时推送技术之SSE（Server-Send Events）
大山博客
02-20 1773
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。服务端推送的背景与需求主要基于以下几个诉求：实时通知：在很多情况下，用户期望实时接收到应用的通知，如新消息提醒、商品活动提醒等。节省资源：如果没有服务端推送，客户端需要通过轮询的方式来获取新信息，会造成客户端、服务端的资源损耗。通过服务端推送，客户端只需要在收到通知时做出响应，大大减少了资源的消耗。
HTML5中的服务器发送事件Server-sent events
Just Code
03-11 946
HTML5加了许多新功能，其中服务器发送事件Server-sent events是一个亮点，以下直接贴上代码示例   客户端a.html页面 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;服务器推送SS...
Server-Sent Events (SSE) 技术分析
qq_37436172的博客
06-06 5564
一般来说HTTP协议是要客户端先请求服务器，服务器才能响应给客户端，无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（event-streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。SSE 就是利用这种机制，使用流信息向客户端推送信息。
服务器发送事件Server-sent events详解与示例
风如也的博客
09-04 3323
Server-Sent-Events（SSE）是一种HTML5 API，用于在服务器和客户端之间实时推送数据流。 SSE可以用于实现实时通知、实时聊天、实时数据更新和实时监控等功能。
Server-Sent Events springboot demo
06-09
以下是一个基于Spring Boot的Server-Sent Events示例： 首先，在pom.xml文件中添加以下依赖项： ``` <groupId>org.springframework.boot <artifactId>spring-boot-starter-web ``` 接下来，创建一个名为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值