zoukankan      html  css  js  c++  java
  • 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 "
    
    ";
      @ob_flush();@flush();
      sleep(1);
    }
    
    ?>

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

    每隔一秒发送一次当前时间.

    这样就创建了一个最简单的websocket应用.

    源码地址: https://github.com/OOP-Code-Bunny/html5/tree/master/websocket 

  • 相关阅读:
    Hibernate session.save()实体类,主键增长问题
    安装原版 Windows 7 后需要安装的微软更新 和 必备系统组件
    如何使用站群程序来批量建网站?
    Android图片优化指南
    SQLite为何要用C语言来开发?
    Kotlin使用率达35%,Java要退位了?
    JavaScript的几种循环使用方式及性能解析
    30 分钟理解 CORB 是什么
    PHP 字符串相关常识
    那些10w+的公众号都在写什么?
  • 原文地址:https://www.cnblogs.com/liulangmao/p/4309444.html
Copyright © 2011-2022 走看看