SSE事件作用,错误分析

Server-Sent(SSE):

server sent用于自动接收服务器更新,当服务器发生数据更新时,此事件将自动执行来更新页面数据,常用于博文、股价等不断变化的项目中。下面将简单介绍SSE中三个常用事件:

onopen,当通往服务器的链接被打开时执行处理函数;

onerror,当服务端发生错误时,执行处理函数;

onmessage,当服务端发生变化时执行处理函数;

首先创建一个实例对象如:new EventSource(‘test.php’),实例对象括号中用于传入一个服务端文件,用于此对象中onmessage事件对象处理,事件对象中data属性就是接收到服务端变化后的数据,事件对象如下:
在这里插入图片描述

服务端数据每更新一次,就会自动执行onmessage事件,具体如下:

javascript脚本:

	<script>// 1.创建EventSource对象:var source = new EventSource('test.php'); //将服务端的脚本地址传入到对象中// 2.使用source对象的onmessage事件监听服务端数据变化,并通过事件对象将变化后的数据打印在控制台:source.onmessage = function(event) {console.log(event.data); //将服务端变化的数据打印到控制台}</script>

服务端文件可以是Java、none.js、php等脚本,这采用php文本介绍SSE,php在本文不做详细介绍,后面会有相关文档详细介绍:

	<!--  创建一个php文档,将文件放到与test.html文件同目录--><?phpheader('Content-Type: text/event-stream');//设置header,后面php会详细介绍$time = date('r');//定义变量接收当前时间echo "data:{$time}\n\n";//将变化的时间输出

注意:此案例应该和web Worker一样部署在服务器上才能正常运行,否则会报类似错误:Access to resource at ‘file:///C:/Users/17121/Desktop/test/test.php’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.;实际开发中应当判断浏览器是否支持EventSource对象,当不支持时应当做出错误提示。

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575414.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css3盒模型、过渡、转换介绍

CSS3中盒模型&#xff1a; 前面CSS中学到的盒子模型给padding、border会撑开盒子的大小&#xff0c;实际大小要通过计算才能得到&#xff0c;为了解决这个问题&#xff0c;CSS3推出了box-sizing属性来解决此问题&#xff0c;当box-sizing的属性值为border-box时&#xff0c;无…

css3中animation动画、浏览器私有前缀、文字阴影、滤镜

animation动画&#xff1a; 可以设置多个节点来控制一个或 一组动画&#xff0c;动画可以实现更多变化&#xff0c;更多控制&#xff0c;连续自动播放等效果。动画的使用分两步&#xff1a;1、定义动画 2、调用动画&#xff08;调用必须写调用名称和持续时间)&#xff0c;其属…

ASP.NET 页生命周期

参考&#xff1a;http://msdn.microsoft.com/zh-cn/library/ms178472(vvs.100).aspx转载于:https://www.cnblogs.com/pengpenghappy/p/3778721.html

计算机基础简介、编程语言、翻译器、数据储存

计算机基础&#xff1a; 编程语言&#xff1a; 编程语言分机器语言、汇编语言、高级语言&#xff0c;机器语言只有计算机本身认识&#xff0c;是二进制的&#xff1b;汇编语言是较低层的指令式语言&#xff0c;有很多指令单词发出命令&#xff0c;程序员可以认识&#xff0c;…

IE8“开发人员工具”(下)

浏览器模式 说白了&#xff0c;就是让用户选择当前页面用何种IE版本去渲染。 文本模式 说起“文本模式”这个名词&#xff0c;这又要回到渲染页面的3种模式了&#xff1a;诡异模式&#xff08;Quirks mode&#xff0c;也有翻译为兼容模式、怪异模式的&#xff09;&#xff0c;标…

javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量

JavaScript简介 JavaScript历史&#xff1a; JavaScript是一门解释型、动态类型、基于对象的脚本语言(不需要编译&#xff0c;直接执行&#xff0c;与之相对的是编译型语言)&#xff0c;由美国网景公司的布兰登艾奇发明&#xff0c;起初称LiveScript&#xff0c;其简称js。 …

javascript中基本包装、算数运算符、递增递减运算符、赋值运算符、比较运算符、逻辑运算符、运算符优先级

基本包装类型&#xff1a; 指基本类型的数据变量通过调用属性或者方法包装成了复杂类型&#xff0c;这个变量也称为基本包装类型对象 <script>var str hello;str str.replace(ll, ee);console.log(str); //heeeo//通过基本包装&#xff0c;无论Boolean对象中传入true还…

流程控制介绍,顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制 流程控制&#xff1a;指代码的执行顺序&#xff0c;有三种方式&#xff1a;顺序结构、分支结构、循环结构 顺序结构&#xff1a; 代码从上到下&#xff0c;从左到右的执行顺序。 分支语句&#xff1a; if语句、if-else语句、if-else if-else语句、switch-case语…

楼宇对讲门铃的芯片选型分析

目前很多的高层住宅都使用了对讲门铃了&#xff0c;在频繁使用中&#xff0c;门铃会出现的越来越多种类&#xff0c;下面我就简单的介绍会有用到的几款芯片. 语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器…

javascript中内置对象简介、Array

内置对象&#xff1a; javascript的三种对象&#xff1a;1.内置对象—JavaScript自带的对象&#xff1b;2.自定义对象—自己定义构造函数创建对象&#xff1b;3.浏览器对象— BOM时候介绍&#xff0c;几个常用内置对象&#xff1a;Math Date String Array Object Array对象&a…

javascript中Date对象及方法

Date对象&#xff1a; 该对象呈现时间中的某个时刻。其本质是自1970年1月1日&#xff08;UTC&#xff09;起经过的毫秒数&#xff0c;相关属性的方法如下&#xff1a;&#xff08;如果Date对象中传入指定的时间&#xff0c;则以传入的指定时间返回相关数据&#xff0c;就不会以…

JAVA Web学习篇--Servlet

Servlet由来 做过BS项目的人都知道&#xff0c;浏览器可以依据HTML静态标记语言来显示各式各样的网页。可是假设我们须要在网页上完毕一些业务逻辑&#xff1a;比方登陆验证。或者说网页显示的内容在server的数据库中。假设是这样&#xff0c;除了负责显示的HTML标记之外&#…

javascript中Math对象及方法

Math对象&#xff1a; 其所有属性与方法都是静态的&#xff0c;其相关属性和方法如下&#xff1a; 继&#xff1a; 继&#xff1a; 提示&#xff1a;本文图片等素材来源于网络&#xff0c;若有侵权&#xff0c;请发邮件至邮箱&#xff1a;810665436qq.com联系笔者 删除。 笔者…

javascript中NaN属性、null对象、Number对象、Object对象

NaN属性&#xff1a; 表示不是一个数字&#xff0c;是全局对象的属性&#xff0c;其初始值为NaN <script>console.log(NaN NaN); //false</script>null对象&#xff1a; 特指对象的值未设置 <script>console.log(null undefined); //trueconsole.log(nul…

Apache安装、配置、卸载

下载安装配置Apache&#xff1a; 1.将Apache官方下载地址&#xff1a;https://www.apachelounge.com/download/&#xff0c;复制到浏览器打开&#xff0c;选择系统支持的版本下载&#xff0c;如&#xff1a; 2.将下载好的压缩包剪贴到C盘根目录&#xff08;这里为了方便&…

企业级应用架构(一) 三层架构之解耦

前言 前段时间朋友拿了个网站给我&#xff0c;让我帮忙添加几个小功能&#xff0c;我爽快的答应了,但是当我打开源码&#xff0c;我瞬间就奔溃了&#xff0c;整个项目连最基本的三层框架也没有搭建&#xff0c;仅仅是封装了一个sqlhelp作为数据库的操作接口&#xff0c;项目中的…

web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型

web api: API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是一些预先定义的函数&#xff0c;目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力&#xff0c;而又无需访问源码&#xff0c;无需理解其内部工作机…

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

transitionend过渡监听事件&#xff1a; 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数&#xff0c;如下案例&#xff1a; <!DOCTYPE html><html><head><meta charset"utf-8"><title></title><…

Unix/Linux环境C编程入门教程(18) kali-linuxCCPP开发环境搭建

1. Kali linux是BT5的晋级版本&#xff0c;用于信息安全。基于Debian7内核。新建虚拟机。2. 选择默认虚拟机3. 选择稍后安装操作系统4.选择Linux Debian7 64位&#xff0c;因为KaliLinux基于Linux Debian7。5. 设置虚拟机名称为KaliLinux6.设置处理器为双核。7. 设置内存为2G8.…

javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步

BOM介绍&#xff1a; BOM指的是浏览器对象模型&#xff0c;是用来操作浏览器的&#xff0c;例如浏览器弹窗、地址栏、滚动条等&#xff0c;浏览器顶级对象&#xff1a;window&#xff1b;页面中的所有内容都是属于window的&#xff0c;window可以省略&#xff1b;confirm(‘带…