浏览器推送 comet技术

318 阅读2分钟

基于服务器端推送事件的Coment技术 定义了一个EventSource对象 服务器端的推送事件的方式为客户端在创建一个EventSource对象时会建立一个到服务器的连接,服务器会保持这个连接处于打开的状态,当发生一个事件的时候,服务器端在连接中写入几行文本,然后达到推送的目的

是使用的是长连接的方式,达到消息推送的目的

一个栗子,实现一个简易的聊天客户端

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script>
	// 一个使用EventSource的简易的聊天客户端
	var nick = prompt('用户昵称');	// 将会使用对话框获取用户昵称
	var input = document.getElementById('input');	// 找出input元素
	input.focus();	// 确保网页一加载就获得焦点

	// 通过EventSource注册新消息的通知
	var chat = new EventSource('/chat');	// 确定长连接的url,从而建立一个长连接,下方为接收的
	chat.onmessage = (event) => {	// 接收事件的时候,将会调用该接口的属性,直接捕获一条消息
		var msg = event.data;	// 从事件对象中取得文本数据
		var node = document.createTextNode(msg);	// 将消息放入一个文本节点中
		var div = document.createElement('div');	// 创建一个div节点
		div.appendChild(node);	// 将消息作为div的子节点
		document.body.insertBefore(div, input);	// 将div插入到input之前
		input.scrollIntoView();	// 当消息很长的时候,确保依旧在视窗内
	};

	// 使用XMLHttpRequest将用户的消息发送给服务器,下方为发送的
	input.onchange = () => {	// 绑定onchange事件,即,当用户的鼠标离开文本框的时候
		var msg = nick + ":" + input.value;	// 组合输入的内容
		var xhr = new XMLHttpRequest();	// 创建一个新的XML
		xhr.open('post', '/chat');	// 将消息发送到chat
		xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');	// 确定头部信息为消息
		xhr.send(msg);	// 将消息发送
		input.value = "";	// 清空消息
	}
</script>
<input id="input" style="width:100%">
</body>
</html>

这个微软不兼容,这个直接用node.js接收客户端发送的post消息即可。 了解,下面jquery