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)的更多相关文章

  1. HTML5 WebSocket 技术介绍

    WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...

  2. Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  3. 打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  4. WebSocket+MSE——HTML5 直播技术解析

    作者 | 刘博(又拍云多媒体开发工程师) 当前为了满足比较火热的移动 Web 端直播需求,一系列的 HTML5 直播技术迅速的发展起来. 常见的可用于 HTML5 的直播技术有 HLS.WebSock ...

  5. 对WebSocket技术的学习与探索(二)

    近日重新开始学习WebSocket技术,什么是WebSocket,在<对WebSocket技术的学习与探索(一)>文章中已经说明白了,还没理解可以看看这篇文章http://www.ruan ...

  6. 对WebSocket技术的学习与探索(一)

    WebSocket 简要介绍 WebSocket protocol 是HTML5一种新的协议. 它实现了浏览器与服务器全双工通信(full-duple). 一开始的握手需要借助HTTP请求完成. We ...

  7. 绝版珍珍藏:web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  8. 常用的Websocket技术一览

    1. 前言 Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据 ...

  9. IT软件人员的技术学习内容(写给技术迷茫中的你) - 项目管理系列文章

    前面笔者曾经写过一篇关于IT从业者的职业道路文章(见笔者文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章).然后有读者提建议说写写技术方面的路线,所以就有了本文.本文从初学者到思想 ...

  10. WebSocket技术

    webSocket技术 在html5技术革新中,加入了WebSocket技术 1.webSocket实际是TCP连接 webSocket在最初将发送http连接请求到服务器端, 但是在header中加 ...

随机推荐

  1. art-template引擎模板

    art-template简介 artTemplate(后文简称aT)才是模板引擎,而TmodJS(后文简称TJ,曾用名atc)则是依赖于前者的一款模板预编译器.两者都是由腾讯开发.其实aT完全可以独立 ...

  2. ArcObject10.1降级至10.0

    最开始接触ArcGIS版本是9.3,为了需要也安装了9.2进行开发:因为自己的电脑配置较低,所以跑不起10.0中文版:毕业工作后,行业内用10.1居多(虽然10.3已出):现在10.4都要出来了:由于 ...

  3. Office 365 - SharePoint Tips & Tricks

    1. Recycle Bin 地址: //管理员 /_layouts/15/AdminRecycleBin.aspx //普通用户 /_layouts/15/RecycleBin.aspx 2.

  4. 【读书笔记】iOS-读取文本文件

    一,文本文件的内容. 二,工程目录 三,ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  5. iOS 删除 Main.storyboard 和 LaunchScreen.storyboard

    第一步: 右键选中Main.storyboard —- delete —— Move to Trash LaunchScreen同理 第二步 点击工程名,就是最顶级目录 右侧出现general选项卡 ...

  6. android学习笔记 activity生命周期&任务栈&activity启动模式

    activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...

  7. windows 7 下,如何统计某文件夹下 视频总时长

    由于项目需要,我需要给系统加权限,这真是一个让人头疼的问题,如果要每个业务方法都加上权限判断逻辑,那真的不敢想象是多么大的工作量,日后有变动的话,我会不会发疯? 所以我必须利用之前学到的AOP编程,在 ...

  8. DNS报文格式

    原文链接地址:http://blog.chinaunix.net/uid-24875436-id-3088461.html DNS报文格式(借个图贴过来):     说明一下:并不是所有DNS报文都有 ...

  9. 在IT的路上,我在成长

    在IT的路上,我在成长.很荣幸地加入了博客园这个大家庭. 岁月的航船在不断航行,在成长的脚印我要深深留下,回首已往经历,发现自己成长的路上,将来也会有很多美好的回忆,以及丰硕的果实.

  10. 烂泥:KVM快照的创建与恢复

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 因为要做有关KVM虚拟机的实验,所以需要虚拟机生成快照.查询相关资料,说KVM可以使用两种方法生成虚拟机的快照. 方法一.使用qemu-img snap ...