浏览器推送 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(); // 创建一个新的XMLxhr.open('post', '/chat'); // 将消息发送到chatxhr.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
转载于:https://juejin.im/post/5b77f3966fb9a019f31211fa
浏览器推送 comet技术相关推荐
- 浏览器推送 comet
基于服务器端推送事件的Coment技术 定义了一个EventSource对象 服务器端的推送事件的方式为客户端在创建一个EventSource对象时会建立一个到服务器的连接,服务器会保持这个连接处于打 ...
- 【SpringBoot】服务器端主动推送SSE技术讲解
=====================16.高级篇幅之SpringBoot2.0服务器端主动推送SSE技术讲解 ============================ 1.服务端推送常用技术介绍 ...
- SpringBoot与ElasticSearch、ActiveMQ、RocketMQ的整合及多环境配置、响应式框架WebFlux、服务器端主动推送SSE技术、生产环境部署、Actuator监控平台
1.SpringBoot 与 ElasticSearch 框架的整合 (1)主要的搜索框架:MySQL.Solr.ElasticSearch MySQL:使用 like 进行模糊查询,存在性能问题 S ...
- 前端ajax数据提交到服务器_详解前端如何让服务器主动向浏览器推送数据
前言 前面我们已经聊了ajax,它的特点是浏览器必须先发起请求,服务器才能给出对应的响应,想一想能不能让服务器主动向浏览器推送数据呢?那么这篇文章我们来聊一聊服务器推送功能. 轮询 假设你现在需要去做 ...
- 2345浏览器如何显示浏览器推送内容
2345浏览器是一款非常便捷好用的浏览服务软件,用户可以在这里获取最便捷的浏览方式,超多的内容都可以一键掌握,浏览器在使用的时候会显示推送内容,用户可以在这里获取最新的新闻资讯等等内容,那么在需要的时 ...
- go gorilla_使用gorilla websocket构建浏览器推送通知服务的低级设计
go gorilla Singhania AdityaSinghania Aditya Follow跟随 Aug 31 8月31 gopher leaving everyone awestruck w ...
- java服务器推送浏览器_前端如何让服务器主动向浏览器推送数据
前言 前面我们已经聊了ajax,它的特点是浏览器必须先发起请求,服务器才能给出对应的响应,想一想能不能让服务器主动向浏览器推送数据呢?那么这篇文章我们来聊一聊服务器推送功能. 轮询 假设你现在需要去做 ...
- java服务器推送消息技术
其实有很多种方式实现服务器推送,它们各有各的优缺点: 1.传统轮询:此方法是利用 HTML 里面 meta 标签的刷新功能,在一定时间间隔后进行页面的转载,以此循环往复.它的最大缺点就是页面刷性给人带 ...
- 千万级WebSocket消息推送服务技术分析
拉模式和推模式区别 拉模式(定时轮询访问接口获取数据) 数据更新频率低,则大多数的数据请求时无效的 在线用户数量多,则服务端的查询负载很高 定时轮询拉取,无法满足时效性要求 推模式(向客户端进行数据的 ...
最新文章
- 使用未编译的XAML动态生成WPF控件
- 如何修改html页眉页脚,如何使用标准页眉和页脚修改/更新一组html文件
- JDK各版本内容和新特性
- Linux下Oracle 10.2.0.1升级到10.2.0.4总结
- linux svn cleanup 用法,SVN命令之清理命令(clean up)的功能及使用技巧
- Snipaste的安装及快捷键的设置
- MongoDB sharding 集合不分片性能更高?
- 基于JAVA+SpringMVC+Mybatis+MYSQL的仿百度网盘系统
- web操作日志丢失_日志异步落库,你了解不
- python粘贴代码到word_python怎么粘贴代码
- Qt制作年会抽奖一界面
- 数独超难题目_超难数独基本解题法
- Kettle Spoon入门学习
- c语言二fseek从文件头移动_C语言fseek函数
- 9种常见的反爬虫策略思路
- 图解大数据 | 大数据分析挖掘-Spark初步
- mysql全文索引使用
- 一台服务器可以干什么
- 芥川龙之介《烟草与魔鬼》
- 基于Go语言GoFrame+Vue+ElementUI的OA办公系统
热门文章
- 凯利公式自动计算表_EXCEL——可自动计算的收支表,全函数计算,拿上就用!
- java中国象棋网络对弈,java课程设计---中国象棋对弈系统
- 苹果cms后台微信小程序影视源码-带视频教程
- Wp keyword link 标签自动内链/文章关键词内链 WordPress插件
- mysql数据库总览_MySQL架构总览-查询执行流程-SQL解析顺序
- 小程序影视APP/追剧吧/脱离微擎/可用火车头采集小程序影视
- 很好看的加载跳转网站源码
- 2019年七月第三周总结
- 博客园随笔添加自己的版权信息 [转]
- Swift中文教程(二十三) 高级运算符