HTML5-WebSocket技术学习(1)
WebSocket是为解决客户端与服务端实时通信而产生的技术。
介绍它是什么的废话不多说了,直接说怎么用:
客户端:
1.创建一个 EventSource 对象
var es = new EventSource(url)
其中,url参数是必填的,传入需要建立通信的后台文件地址
2.指定事件回调
EventSource的实例可以指定以下三个事件回调:
(1).onopen: 连接建立成功
es.onopen=function(e){
//连接建立成功后执行的内容
}
(2).onmessage: 接收到数据
es.onmessage=function(e){
//接收到数据后执行的内容.e.data就是接收到的数据
console.log(e.data)
}
(3).onerror: 连接失败
es.onopen=function(e){
//连接建立失败执行的内容
}
服务器端:
设置响应头: Content-Type:text/event-stream
下面举个简单的栗子,服务器端每秒发送当前的时间到客户端:
index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="script.js"></script>
</head>
<body> <div id="zt"></div>
<h3>当前时间:</h3>
<div id="date"></div> </body>
</html>
<div id="zt"></div>用来存放连接状态
<div id="date"></div>用来存放当前时间
script.js:
(function(){
var status,date;
var serverUrl = 'socket.php';
window.onload = function(){
status = document.getElementById('zt');
date = document.getElementById('date');
connect();
};
function connect() {
status.innerHTML = '正在创立连接';
var es = new EventSource(serverUrl);
es.onopen = openCallback;
es.onerror = errorCallback;
es.onmessage = messageCallback;
}
function openCallback(e) {
status.innerHTML = '已连接'
}
function errorCallback(e) {
status.innerHTML = '连接错误'
}
function messageCallback(e) {
date.innerHTML = e.data
}
})();
说明:
创建一个EventSource对象,传入socket.php作为参数.socket.php就是建立通信的后台文件.
分别执行onopen回调,onmessage回调,onerror回调,将对应的连接状态和接收到的数据显示在页面中.
socket.php:
<?php
header('Content-Type:text/event-stream'); for($i = 0; $i<10; $i++) {
date_default_timezone_set("Asia/Shanghai");
echo 'data:'.date('Y-m-d H-i-s');
echo "\n\n";
@ob_flush();@flush();
sleep(1);
} ?>
设置响应头Content-Type为text/event-stream
每隔一秒发送一次当前时间.
这样就创建了一个最简单的websocket应用.
源码地址: https://github.com/OOP-Code-Bunny/html5/tree/master/websocket
HTML5-WebSocket技术学习(1)的更多相关文章
- HTML5 WebSocket 技术介绍
WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...
- Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- 打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- WebSocket+MSE——HTML5 直播技术解析
作者 | 刘博(又拍云多媒体开发工程师) 当前为了满足比较火热的移动 Web 端直播需求,一系列的 HTML5 直播技术迅速的发展起来. 常见的可用于 HTML5 的直播技术有 HLS.WebSock ...
- 对WebSocket技术的学习与探索(二)
近日重新开始学习WebSocket技术,什么是WebSocket,在<对WebSocket技术的学习与探索(一)>文章中已经说明白了,还没理解可以看看这篇文章http://www.ruan ...
- 对WebSocket技术的学习与探索(一)
WebSocket 简要介绍 WebSocket protocol 是HTML5一种新的协议. 它实现了浏览器与服务器全双工通信(full-duple). 一开始的握手需要借助HTTP请求完成. We ...
- 绝版珍珍藏：web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- 常用的Websocket技术一览
1. 前言 Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据 ...
- IT软件人员的技术学习内容（写给技术迷茫中的你） - 项目管理系列文章
前面笔者曾经写过一篇关于IT从业者的职业道路文章(见笔者文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章).然后有读者提建议说写写技术方面的路线,所以就有了本文.本文从初学者到思想 ...
- WebSocket技术
webSocket技术 在html5技术革新中,加入了WebSocket技术 1.webSocket实际是TCP连接 webSocket在最初将发送http连接请求到服务器端, 但是在header中加 ...
随机推荐
- Vue.js简介
Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...
- 使用Lucene.NET实现简单的站内搜索
使用Lucene.NET实现简单的站内搜索 导入Lucene.NET 开发包 Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和 ...
- angularjs的双向数据绑定
数据绑定有两个方向: 数据 → 界面:我们使用scope对象的$watch()方法监听数据的变化,来更新界面. <html> <head> <title>监听数据& ...
- Oracle_spatial的函数介绍[转]
Oracle_spatial的函数 一sdo_Geom包的函数: 用于表示两个几何对象的关系(结果为True/False)的函数:RELATE,WITHIN_DISTANCE 验证的函数:VALIDA ...
- NLog 自定义字段 写入 oracle
1.通过Nuget安装NLog 下载,简单入门 请参照 我刚才转的几篇文章,下面我直接贴代码 2.建表语句 create table TBL_LOG ( id ) not null, appname ...
- Oracle EBS在编码方式为AL32UTF8时的注意事项
现如今的EBS系统中,为了推进国际化的进程,以及系统向全球化的扩展,在Oracle数据库的编码方式上渐渐从支持中国本土简体中文的ZHS16GBK转向了更趋于国际化的AL32UTF8编码方式.但随之而来 ...
- 转：HTTP 1.1与HTTP 1.0的比较
原文地址:http://blog.csdn.net/elifefly/article/details/3964766 HTTP 1.1与HTTP 1.0的比较 一个WEB站点每天可能要接收到上百万的用 ...
- java多线程系列4-线程池
在之前的文章中,学习了通过实现java.lang.Runnable来定义类,以及像下面这样创建一个线程来运行任务: Runnable task = new TaskClass(task); new T ...
- SQL JOIN
- Swift中的类和结构体的相同点与不同点
相同点: 1.都是有内部变量和函数 2.都可以有内部下标方式去取属性 3.都可以有初始化函数 4.都可以用协议 不同点: 1.类有继承 2.类可以多重引用 3.类有析构