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. sharepoint 顺序工作流创建

    顺序工作流提供了一系列有组织的步骤,一般情况下,步骤是逐一执行的. 1.新建 > 项目,选择 SharePoint解决方案 > 空项目: 2.部署为场解决方案 3.添加 > 新项,选 ...

  2. SharePoint Iframe 报错“此内容不能显示在一个框架中”

    问题描述 我们SharePoint站点用Excel Service发布的Excel,需要Iframe到其他系统中,但是,Iframe的时候发现报错“此内容不能显示在一个框架中”. 后来,尝试在其他系统 ...

  3. C标准库<ctype.h>实现

    本文地址:http://www.cnblogs.com/archimedes/p/c-library-ctype.html,转载请注明源地址. 1.背景知识 ctype.h是C标准函数库中的头文件,定 ...

  4. 发布的时候Archive灰色

    主要是因为发布的时候要选为将模拟器选择一下,选为Generic iOS Device. 来自为知笔记(Wiz)

  5. 自定义cell

    思路就是创建模型,自定义cell,然后在主控制器中完成,首先要观察plist文件: Contact.h #import <Foundation/Foundation.h> @interfa ...

  6. Oracle递归查询

    一.创建数据 1.1.建立表与插入数据 CREATE TABLE DISTRICT ( ID ) NOT NULL, PARENT_ID ), NAME BYTE) NOT NULL ); ALTER ...

  7. OC字符串的一些常用的函数。

    )//获取字符串长度 NSUInteger len= str.length; () //通过指定索引返回对应的字符 unichar ch =[str characterAtIndex:]; ()//通 ...

  8. 在virtualbox下使用vm映像文件

    virtualbox可以直接打开vmdk 创建虚拟机时先不要创建虚拟硬盘. 虚拟机创建成功后,在设置窗口,点击[存储],添加虚拟硬盘,点击选择现有的虚拟盘. 参考链接

  9. 多线程基础(三)NSThread基础

    3.多线程基础 NSThread的基本使用   如何使用NSThread创建新线程 创建线程之后是默认不执行的状态 创建三个线程:   通过name属性区别这些线程 接下来就是通过设置线程的优先级来设 ...

  10. linux 2>&1

    2>&1就是用来将标准错误2重定向到标准输出1中的.此处1前面的&就是为了让bash将1解释成标准输出而不是文件1.至于最后一个&,则是让bash在后台执行 例如:/us ...