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. GetReadyForWin10Develop

    GetReadyForWin10Develop 序言 今年4月29日晚的微软的Build大会上,微软在现场为我们演示了Android和IOS应用移植到windows平台,加上原本可以开发win8应用的 ...

  2. JSON/XML格式化插件比较

    一.引子 Chrome工具里面有很多json格式化的插件,可以让杂乱的json内容变得有序,我们先来看看效果: 正常情况下: 格式化后: 规整多了吧! 二.工具分享+比对 1.JSON Formatt ...

  3. 浅谈RSA加密算法

    一.什么是非对称加密 1.加密的密钥与加密的密钥不相同,这样的加密算法称之为非对称加密 2.密钥分为:公钥,私钥  公钥:可以对外给任何人的加密和解密的密码,是公开的 私钥:通过私钥可以生成公钥,但从 ...

  4. 使用greenDAO生成DAO代码

    研究greenDAO有几天了,刚开始看别人的博客基本都把我带到了沟里,讲gradle把简单的问题搞得非常复杂,而且都是抄来抄去,看来看去也就那么几篇,实在看不下去了,只得硬着头皮自己琢磨,好在终于把这 ...

  5. windows 我的电脑右键 无法打开管理窗口

    保存成reg文件,执行一下就好了. Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\CLSID\{20D04FE0-3AEA-1069- ...

  6. java 之 file类的一些方法

    File类: File类是java.io包下代表与平台无关的文件和目录,也就是说,如果希望在程序中操作文件和目录,都可以通过File类来完成.但是File不能访问文件内容本身. 访问文件和目录: 1. ...

  7. java编程思想第四版中net.mindview.util包下载，及源码简单导入使用

    在java编程思想第四版中需要使用net.mindview.util包,大家可以直接到http://www.mindviewinc.com/TIJ4/CodeInstructions.html 去下载 ...

  8. forfiles命令批量删除N天前文件

    在整理手上几台SQL SERVER 2000的数据库备份时,一方面为了方便快速还原数据库,另外一方面为了备份冗余.备份方式统一(先备份到本地,然后收上磁带),将以前通过Symantec Backup ...

  9. 大数据架构-使用HBase和Solr将存储与索引放在不同的机器上

    大数据架构-使用HBase和Solr将存储与索引放在不同的机器上 摘要:HBase可以通过协处理器Coprocessor的方式向Solr发出请求,Solr对于接收到的数据可以做相关的同步:增.删.改索 ...

  10. Vert.x入门体验

    Vert.x入门体验 一.概述 Vert.x(http://vertx.io)是一个基于JVM.轻量级.高性能的应用平台,非常适用于最新的移动端后台.互联网.企业应用架构. 二.安装配置 访问Vert ...