HTML5-WebSocket技术学习(1)

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)

相关文章