博客

前几天写的一个在菜单图标上面显示消息数量，先记一下上次获取的消息的操作

上次消息数是通过设置一个定时器，每隔一段时间就进行一次Ajax请求，查询数据库符合条件的数据条数

因为要不断对服务器进行请求，所以时间间隔设置稍微长一点，获取的数据存在sessionStorage里面，第一次载入页面的时候先判断sessionStorage里面有没有值，没有的话立即执行请求

后来又有其他的消息也要在这个页面上显示，然后去看了一下之前的项目角标显示的方法，发现是使用了 EventSource 的方法获取的，EventSource 是服务器每隔一段时间向客户端推送消息

Web 开发技术-EventSource


EventSource


接口用于接收服务器发送的事件。

它通过HTTP连接到一个服务器，以

text/event-stream

格式接收事件, 不关闭连接。

new EventSource(url); 指定要请求的url

es.open 是与服务器连接成功执行的函数，

es.onmessage 是收到服务器的数据执行的函数，

es.onerror 是执行出现错误时执行的函数，

这里在每次接收到服务器的数据后就设置该消息的角标数量

function comet(cmd, el, module) { 
	var url = '';
	var es = new EventSource(url);
	// es.onopen = function (es) {
	//     console.log('消息链接已打开');
	// };
	es.onmessage = function (ev) {
		var rs = JSON.parse(ev.data);
		if ('0' == rs.erron) {
			document.getElementById(el).innerText = (rs.data instanceof Object ? rs.data[0].total : rs.data) == 0 ?
				'' : (rs.data instanceof Object ? rs.data[0].total : rs.data);
			console.log('<- '+ (module||'') +'收到消息', rs);
		} else {
			msg.warn('数据取出现异常');
			es.close();
		}
	};
	// es.onerror = function (err) {
	//     console.log('消息链接发生错误' + err);
	// }
}

后端设置返回头的格式为 text/event-stream ，data是数据字段，retry是间隔时间，要使用\n\n结尾

context.Response.ContentType = "text/event-stream";
context.Response.Write("data:" + num + "\n\n" + "retry:"+10000+"\n\n");
context.Response.End();

参考文章：

HTML5—EventSource服务端推送事件

这样客户端就能每隔10秒收到服务器的消息推送了