浏览器推送 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

目录
相关文章
|
7月前
|
前端开发 JavaScript
同源策略下,服务器会收到浏览器的请求吗?
同源策略下,服务器会收到浏览器的请求吗?
|
Web App开发
谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域
谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域
952 0
|
缓存 移动开发 编解码
和我一起来看看浏览器的异步实现到底有哪些方式
前端为何会有异步这一说法,是因为前端的代码是在浏览器中运行的,而浏览器是单线程的,前端的代码是在主线程中运行的,如果有耗时的操作,就会阻塞主线程,导致页面卡顿,所以就有了异步这一说法。
315 0
|
Web App开发 Android开发 iOS开发
哪些浏览器提供WebRTC支持?
哪些浏览器提供WebRTC支持?
uniapp之判断是在微信浏览器or普通浏览器
uniapp之判断是在微信浏览器or普通浏览器
1401 0
|
Web App开发 缓存 前端开发
浏览器工作原理和实践(一)——浏览器
  《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。
浏览器工作原理和实践(一)——浏览器
html+css实战3-了解-初识-浏览器
html+css实战3-了解-初识-浏览器
98 0
html+css实战3-了解-初识-浏览器
html+css实战93-浏览器效果
html+css实战93-浏览器效果
110 0
html+css实战93-浏览器效果
|
Web App开发 开发者
使用 IE 或Chrome等浏览器,通过网络抓包的形式,查看发送请求时的网络
使用 IE 或Chrome等浏览器,通过网络抓包的形式,查看发送请求时的网络
478 0
使用 IE 或Chrome等浏览器,通过网络抓包的形式,查看发送请求时的网络
|
JavaScript 前端开发 开发者
介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
386 0
介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)