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中加 ...
随机推荐
- android Adapter剖析理解
UI控件都是跟Adapter(适配器)打交道的 Adapter: 是用来帮助控件填充数据的中间桥梁 (在开发中大多数Textview控件的内容是依靠数据库传递并显示的如:新闻类) Adapter: 将 ...
- 扩展SharePoint链接字段
默认SharePoint中的链接字段有很多限制,例如 输入文字的时候只能录入255个字符 链接显示的是文字 点击链接后只能在当前页面打开链接 - - - - - - -- - - - - - - ...
- 2015年第12本（英文第8本）：the Old Man and the Sea 老人与海
书名:The Old Man and The Sea(老人与海) 作者:Ernest Hemingway 单词数:2.7万 不重复单词数:2600 首万词不重复单词数:1500 蓝思值:940 阅读时 ...
- 与成都的幸福行动家交流GTD
今年第四次来成都了,通过<小强升职记>的作者邹鑫的撮合,与成都的幸福行动家何平取得了联系,2014年12月6日下午给几个小伙伴们分享了GTD3年来的一点体会.有几位刚接触GTD的朋友,也有 ...
- Android源码分析之Looper
先来说说summary,Looper就是用来在某个线程中跑一个message loop.一个线程默认是没有message loop与之相关联的, 为了创建一个你必须在这个线程中调用Looper.pre ...
- .NET下dropdownlist的基本操作
//List列中索引的赋值 teacher.DataValueField = ds.Tables[0].Columns["pidcord"].ColumnName; //List列 ...
- iOS设计模式-单例模式
(一)什么是单例模式(Singleton) 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点 *最初的定义是在<设计模式>(Addison-Wesley)中 解读 1> ...
- IOS之UI -- UITableView -- 1 -- 相关初识
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- android之apk反编译
今天就来详细的讲一讲apk的反编译过程,之前自己一直没彻底搞清楚. 一.准备工作 反编译首先要准备三个工具.这三个工具都是可以百度下载的.就是下图所示的三个工具. 这三个工具是有各自作用的: (1)a ...
- 基于WF4.0的公文管理系统
系统功能说明 公文管理 通过定义公文的基本信息,并将它按照工作流的定义流转实现公文的管理.包含以下功能: )公文创建:用户能够将格式化文本作为公文上传到系统中,并选择工作流启动流程. )公文审批:具有 ...