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中加 ...
随机推荐
- XML的文档声明
1.XML的文档声明 <?xml version="1.0" encoding="utf-8"?> 文档声明必须写在第一行第一列 属性: versi ...
- 如何解决div层被flash遮盖的问题
页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...
- 转：Android 判断用户2G/3G/4G移动数据网络
Android 判断用户2G/3G/4G移动数据网络 在做 Android App 的时候,为了给用户省流量,为了不激起用户的愤怒,为了更好的用户体验,是需要根据用户当前网络情况来做一些调整的,也可以 ...
- Ubuntu 14.04下安装JDK8
本文地址:http://www.cnblogs.com/archimedes/p/ubuntu-jdk8.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudong.com, 更多云 ...
- C标准库<string.h>实现
本文地址:http://www.cnblogs.com/archimedes/p/c-library-string.html,转载请注明源地址. 1.背景知识 <string.h>中声明的 ...
- Spring(三)Bean继续入门
一.Aware相关接口 对于应用程序来说,应该尽量减少对Sping Api的耦合程度,然而有些时候为了运用Spring所提供的一些功能,有必要让Bean了解Spring容器对其进行管理的细节信息,如让 ...
- CGContextRef使用简要教程
CGContextRef使用简要教程 Graphics Context是图形上下文,也可以理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个 ...
- 关于Block Formatting Context－－BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- JS 日期对象在浏览器间的若干差异
JS中 ,通过 new Date() 可以获取当前时间 也可以通过 new Date("2013/12/12 8:00:00")的方式,创建某个指定时间对象 在Chrome和FF下 ...
- Nginx的安装与使用
在 CentOS 7 系统上: $ sudo rpm --import http://nginx.org/keys/nginx_signing.key $ sudo rpm -ivh http://n ...