WebSocket是为解决客户端与服务端实时通信而产生的技术。

介绍它是什么的废话不多说了,直接说怎么用:

客户端:

1.创建一个 EventSource 对象

  1. var es = new EventSource(url)

其中,url参数是必填的,传入需要建立通信的后台文件地址

2.指定事件回调

EventSource的实例可以指定以下三个事件回调:

(1).onopen: 连接建立成功

  1. es.onopen=function(e){
  2.     //连接建立成功后执行的内容　　
  3. }

(2).onmessage: 接收到数据

  1. es.onmessage=function(e){
  2.     //接收到数据后执行的内容.e.data就是接收到的数据
  3.     console.log(e.data)  　　
  4. }

(3).onerror: 连接失败

  1. es.onopen=function(e){
  2.     //连接建立失败执行的内容　
  3. }

服务器端:

设置响应头:  Content-Type:text/event-stream

下面举个简单的栗子,服务器端每秒发送当前的时间到客户端:

index.html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title></title>
  5.   <meta charset="utf-8">
  6.   <script type="text/javascript" src="script.js"></script>
  7. </head>
  8. <body>
  9.  
  10.   <div id="zt"></div>
  11.   <h3>当前时间:</h3>
  12.   <div id="date"></div>
  13.  
  14. </body>
  15. </html>

<div id="zt"></div>用来存放连接状态
<div id="date"></div>用来存放当前时间

script.js:

  1. (function(){
  2.     var status,date;
  3.     var serverUrl = 'socket.php';
  4.     window.onload = function(){
  5.         status = document.getElementById('zt');
  6.         date = document.getElementById('date');
  7.         connect();
  8.     };
  9.     function connect() {
  10.         status.innerHTML = '正在创立连接';
  11.         var es = new EventSource(serverUrl);
  12.         es.onopen = openCallback;
  13.         es.onerror = errorCallback;
  14.         es.onmessage = messageCallback;
  15.     }
  16.     function openCallback(e) {
  17.         status.innerHTML = '已连接'
  18.     }
  19.     function errorCallback(e) {
  20.         status.innerHTML = '连接错误'
  21.     }
  22.     function messageCallback(e) {
  23.         date.innerHTML = e.data
  24.     }
  25. })();

说明:

创建一个EventSource对象,传入socket.php作为参数.socket.php就是建立通信的后台文件.

分别执行onopen回调,onmessage回调,onerror回调,将对应的连接状态和接收到的数据显示在页面中.

socket.php:

  1. <?php
  2. header('Content-Type:text/event-stream');
  3.  
  4. for($i = 0; $i<10; $i++) {
  5.   date_default_timezone_set("Asia/Shanghai");
  6.   echo 'data:'.date('Y-m-d H-i-s');
  7.   echo "\n\n";
  8.   @ob_flush();@flush();
  9.   sleep(1);
  10. }
  11.  
  12. ?>

设置响应头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. Docker: 解决Centos 7中Permission Denied的问题

    当用docker -v挂载volume后,会出现Permission Denied的问题,这有时是因为SeLinux导致的.解决方法如下: chcon -Rt svirt_sandbox_file_t ...

  2. cell自适应高度

    MyModel.h #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface MyModel : ...

  3. C语言-01-基本语法

    一.学前需知 开发工具 windows平台:Visual C++6.0等 mac平台:Xcode6.0等 以下文章内容皆是以Xcode6.0为开发工具,clang编译器. Xcode的一些常用快捷键 ...

  4. IOS开发--常用工具类收集整理（Objective-C）（持续更新）

    前言:整理和收集了IOS项目开发常用的工具类,最后也给出了源码下载链接. 这些可复用的工具,一定会给你实际项目开发工作锦上添花,会给你带来大大的工作效率. 重复造轮子的事情,除却自我多练习编码之外,就 ...

  5. sublime text 3 如何安装 package control

    sublime text3 是个很好的编辑工具,前端程序员觉得她很好,我是在一次视频中看到她能帮助自动完成很多快捷的操作. 为什么安装? 如果想要给sublime text 中安装别的插件(这里称呼为 ...

  6. javascript 定时器

    setTimeout()--用于指定在一段特定的时间后执行某段程序.           格式: [定时器对象名=]setTimeout("<表达式>",毫秒数); 功 ...

  7. Java 读取大文件方法

    需求:实际开发中读取文本文件的需求还是很多,如读取两个系统之间FTP发送文件,读取后保存到数据库中或日志文件的数据库中保存等. 为了测试首先利用数据库SQL生成大数据文件. 规则是 编号|姓名|手机号 ...

  8. OOD沉思录 --- 类和对象的关系 --- 包含关系3

    4.7 类包含的对象数目不应当超过开发者短期记忆数量,这个数目通常应该是6左右 4.8 让系统在窄而深的包含体系中垂直分布 假设有如下两份菜单: 正餐 --->甜瓜 --->牛排 ---& ...

  9. MongoDB学习笔记——MongoDB 连接配置

    MongoDB连接标准格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN]]][/[dat ...

  10. 在Eclipse中安装SVN客户端插件

    在Eclipse中安装SVN客户端插件 1.1  Eclipse插件应用市场 在Eclipse中访问Eclipse Marketplace Client可以搜索Subversion,下载插件,按提示安 ...