基于服务器端推送事件的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
转载于:https://juejin.im/post/5b77f3966fb9a019f31211fa
今天的文章 浏览器推送 comet技术分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/86108.html