浏览器推送 comet

基于服务器端推送事件的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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

微信小程序入门(五)

热启动:假入用户已经打开某个小程序,然后在一定时间内再次打开小程序,这个时候,就不需要重新启动了,只需要把后台小程序切换到前台来使用,这个过程就叫做热启动。

65120
来自专栏前端安全

前端调试入门

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题...

1K330
来自专栏奇梦博客

发帖UMEditor编辑器增加表情,附加表情包下载 PHP 配置 XiunoBBS

18250
来自专栏dotnet & java

win8 notepad++ 设置无法保存

前些天买了新笔记本。装的是win8 ,后来装了notepad++ ,最新版的,改了字体,下次从新打开之后,发现字体改动无效。后来试了一下“管理员身份运行”,再次...

12930
来自专栏vue学习

4.vue-router之什么是嵌套路由

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是...

11420
来自专栏云服务试衣间

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用能力:COS文件上传/删除的触发器。

6.4K290
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

19650
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(一)

一般来说键盘用的越多鼠标用的越少,那么写起代码来效率就越高;常见的快捷键想必大家都已经掌握,接下来我就分享一些你可能不知道的但确非常实用的快捷键。

13140
来自专栏九彩拼盘的叨叨叨

location 对象详解

Location 对象包含有关当前 URL 的信息。 可通过 window.location 属性来访问。

10820
来自专栏小狼的世界

Mac下安装Android模拟器

像iPhone的iOS或者其他的手机操作系统一样,Android的开发者非常需要一个模拟器,以在设备上实地测试前对自己开发的应用进行测试。这需要借住SDK来实现...

43920

扫码关注云+社区

领取腾讯云代金券