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,一经查实,立即删除!

相关文章

rails log_level

environments/production.rb里配置log_level config.log_level :debug http://www.rubycc.com/column/rails3.2.3/config.htm转载于:https://www.cnblogs.com/hellolzj/p/3772637.html

CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素

CSS3知识点: CSS3的相关属性不兼容低版本浏览器&#xff0c;IE9以下是不兼容的&#xff0c;在实际开发中要特别注意&#xff0c;移动端支持优于PC端&#xff0c;是在CSS2上新增的属性&#xff0c;关于兼容这里有两个名词需要了解&#xff1a; 渐进增强 &#xff1a;&#xff…

JavaScript大杂烩4 - 理解JavaScript对象的继承机制

JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言&#xff0c;它只有单一的根Object&#xff0c;所有的其他对象都是直接或者间接的从Object对象继承。而在JavaScript的众多讨论中&#xff0c;JavaScript的继承机制也是最让人津津乐道的&#xff0c;在了解…

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

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

【Leetcode】Sort List

Sort a linked list in O(n log n) time using constant space complexity. 单向链表排序O(nlogn)&#xff0c;Mergesort可以实现。 1 /**2 * Definition for singly-linked list.3 * struct ListNode {4 * int val;5 * ListNode *next;6 * ListNode(int x) :…

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。 …

数据字典视图

数据字典视图 数据自动视图分为三大类&#xff0c;分别用对应的前缀表示为user_*,all_*,dba_*分别表示的意思如下&#xff1a; user_*:有关用户所拥有的对象的信息&#xff0c;即用户自己创建的对象的信息 all_*:有关用户可以访问的对象的信息&#xff0c;即用户自己创建的对象…

javascript中数据类型及转换、String()和toString()的区别

数据类型&#xff1a; JavaScript中的数据类型&#xff1a; 在计算机中&#xff0c;不同的数据类型所占的储存空间是不同的。1、原始数据类型&#xff1a;number (数字)、string&#xff08;字符串&#xff09;、boolean&#xff08;布尔值&#xff09;、null&#xff08;空对…

Algorithm(1) - Karatsuba multiplication

这个系列主要是记一下目前效率较高或者比较出名的一些算法. Karatsuba multiplication: x5678 then: a56 b67 y1234 c12 d34 setps: 1: a*c 672 ① 2: b*d2652 ② 3: (ab)(cd)6164 ③ 4: ③-②-①2840 5: 6720000 2652284000 7006652 Recursive …

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

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

grootjs 简明教程

grootJs简明教程 mvvm框架也是解决的一类问题&#xff0c;在某些时候会提高生产效率&#xff1b; 经过接近一个月的努力&#xff0c;grootJs测试版终于发布了 grootJs是一个mvvm的框架&#xff0c;名字取 grass 和root 两个单词的组合&#xff0c;既“草根”之意。在创作的中…

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

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

javascript中数组、冒泡排序、函数及函数实参形参、arguments伪数组、异步函数等介绍

数组&#xff1a; 指一组有顺序的数据&#xff0c;其作用就是用来一次性存储多个数据。&#xff08;数组元素&#xff1a;数组中的每一个数据&#xff1b;数组长度&#xff1a;数据中元素的个数&#xff1b;数组索引&#xff1a;用来存储或访问数组中的数据&#xff0c;也叫下…

中文字串截取无乱码的问题

UTF-8中文截取函数在PHP中&#xff0c;substr()函数截取带有中文字符串的话&#xff0c;可能会出现乱码&#xff0c;这是因为中西文一个字节所占有的字节数不一样&#xff0c;而substr的长度参数是按照字节去算的&#xff0c;在GB2312编码时&#xff0c;一个中文占2个字节&…

javascript中作用域、全局作用域、局部作用域、隐式全局变量、块级作用域、作用域链、预解析

作用域 作用域指的是代码的作用范围&#xff0c;按照作用域划分变量可分为全局变量和局部变量&#xff1b;作用域可分为&#xff1a; 全局作用域&#xff1a; 指全局变量作用的范围&#xff1b;全局变量指的是通过var在函数外面声明的变量&#xff0c;在js中任何位置都可以使…

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

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