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. EntityFramework5学习

    在开发面向数据的软件时我们常常为了解决业务问题实体.关系和逻辑构建模型而费尽心机,ORM的产生为我们提供了一种优雅的解决方案.ADO.NET Entity Framework是.NET开发中一种由AD ...

  2. 滴滴DSRC抢楼大赛，十一快车券飞起来

    十一马上就要到了 不管你想要去哪里 总少不了滴滴打车 DSRC为你准备了30份快车券 现在开始参与抢楼,就有机会得到 活动时间: 本帖发布之时起-9月30日12:00 参与方式: 关注微信公众号“滴滴 ...

  3. 2014年听写VOA50篇

    在沪江英语的VOA听写栏目上听写完成50篇,听写笔记PDF. 103.VOASP.2014奥巴马国情咨文(1-3).mp3 104.VOASP.2014奥巴马国情咨文(2-3).mp3 105.VOA ...

  4. Android 5中不同效果的Toast

    一.运行的结果 二.主要的代码 package com.otn.android.toast; import java.util.Timer; import java.util.TimerTask; i ...

  5. iOS仿京东分类菜单之UICollectionView内容

    在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...

  6. iOS网络检测Reachability 使用 Demo，可检测2、3、4G

    你可以在Github下载这个Demo https://github.com/JanzTam/Reachability_Demo 首先,引入系统的Reachability类,不知道怎么引入的话,在Xco ...

  7. NSFileManager文件操作的十个小功能

    NSFileManager文件操作的十个小功能 NSFileManager是一个单列类,也是一个文件管理器.可以通过NSFileManager创建文件夹.创建文件.写文件.读文件内容等等基本功能. 下 ...

  8. IOS之UI--小实例项目--添加商品和商品名（使用xib文件终结版） + xib相关知识点总结

    添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...

  9. 【API】短信通106端口验证短信的实现

    信息时代,无论是电商还是网络营(chuan)销(xiao)都希望得道更多的用户信息.所以很多的网站注册上用到了手机验证码功能.网上有很多的SMS接口提供商.在选择的时候无非就是考虑到1.发送速度:2. ...

  10. SQL2012数据库加密方法

    1.非对称密钥来保护新的对称密钥 /*--测试环境 Microsoft SQL Server 2012 (SP1) - 11.0.3000.0 (X64) Oct 19 2012 13:38:57 C ...