HTML5 WebSockets 基础使用分享

时间 2019-12-06

标签 html5 html websockets 基础使用分享栏目 HTML5 繁體版

原文原文链接

摘要：HTML5之中一个很酷的新特性就是WebSockets，它可让咱们无需AJAX请求便可与服务器端对话。今天彬Go将让你们经过Php环境的服务器端运行WebSocket，建立客户端并经过WebSockets协议发送和接收服务器端信息。

　　什么是WebSockets？
　　WebSockets是在一个(TCP)接口进行双向通讯的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。javascript

　　WebSockets将会替代什么？php

　　WebSockets能够替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，如今，服务器端并不会响应还没准备好的数据，它会保持链接的打开状态直到最新的数据准备就绪发送，以后客户端收到数据，而后发送另外一个请求。这有它的好处：减小任一链接的延迟，当一个链接已经打开时就不须要建立另外一个新的链接。可是Long-Polling并非什么花俏技术，他仍有可能发生请求暂停，所以会须要创建新的链接。html

　　一些AJAX应用使用上述技术-这常常是归因于低资源利用。html5

　　试想一下，若是服务器在早晨会自启动并发送数据到那些但愿接收而不用提早创建一些链接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！java

　　第一步：搞定WebSocket服务器
　　这篇教程会把更多的精力放在客户端的建立而不是服务器端的执行等操做。jquery

　　我使用基于windows 7的XAMPP来实现本地运行PHP。phpwebsockets是PHP WebSocket服务器。(以个人经验这个版本存在一些小问题，我已对它作了些修改并上传源文件共享给你们)下面的这些不一样版本也能够实现WebSocket，若是某个不能用，你能够试试其它版本或者继续看下面的教程。web

启动Apache服务器ajax

第二步：修改URLs和端口
chrome

　　根据你以前的安装修改服务器，下面是setup.class.php中的例子：shell

publicfunction _construct($host='localhost',$port=8000,$max=100)  
{  
    $this->createSocket($host,$port);  
}

浏览文件并在适当状况下进行更改。

第三步：开始建立客户端

　　下面来建立基本模板，这是个人client.php文件：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <title>WebSockets Client</title>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <h1>WebSockets Client</h1>
        <div id="chatLog"></div>
        <!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>
        <input id="text" type="text"/>
        <button id="disconnect">Disconnect</button>
    </div>
    <!-- #container -->
</div>
</body>
</html>

咱们已经建立里基本模板：一个chat log容器，一个input输入框和一个断开链接的按钮。

第四步：添加一些CSS

　　没什么花俏代码，只是处理一下标签的样式。

body {
    font-family:Arial, Helvetica, sans-serif;
}
#container{
    border:5px solid grey;
    width:800px;
    margin:0 auto;
    padding:10px;
}
#chatLog{
    padding:5px;
    border:1px solid black;
}
#chatLog p {
    margin:0;
}
.event {
    color:#999;
}
.warning{
    font-weight:bold;
    color:#CCC;
}

第五步：WebSocket事件
　　首先让咱们尝试并理解WebSocket事件的概念：

　　WebSocket事件：

　　咱们将使用三个WebSocket事件：

onopen: 当接口打开时
onmessage: 当收到信息时
onclose: 当接口关闭时

　　咱们如何来实现呢？

　　首先建立WebSocket对象

var socket =new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

而后向下面这样检测事件

socket.onmessage =function(msg){  
   alert(msg); //Awesome!  
}

但咱们仍是尽可能避免使用alert，如今咱们能够把咱们学的东西整合到客户端页面中了。

第六步：JavaScript
　　首先咱们将代码放到jQuery的 document.ready函数中，而后咱们还要检查用户的浏览器是否支持WebSocket。若是不支持，咱们就添加一个链向Chrome浏览器页面的连接。

$(document).ready(function(){  
if(!("WebSocket"in window)){  
        $('#chatLog, input, button, #examples').fadeOut("fast");  
        $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').ppendTo('#container');  
    }else{  
　　//The user has WebSockets  
    connect();  
function connect(){  
　　//the connect function code is below  
    }  
});

如你所见，若是用户浏览器支持WebSocket，咱们将执行connect()函数。这里是核心功能，咱们将开始建立open、close和receive事件。

　　咱们将在咱们的服务器定义URL。

var socket;  
var host ="ws://localhost:8000/socket/server/startDaemon.php";

你可能会发现URL中怎么没有http？恩，是的，这是一个WebSocket URL，使用了不一样的协议。下面是URL分解图示：

　　下面让咱们继续完成connect()函数，咱们将代码放入try/catch块，这样若是代码出现问题，咱们能让用户知道。咱们建立WebSocket，并将信息传递到message()函数，以后会作讲解。咱们建立咱们的onopen、onmessage和onclose函数.须要注意的是咱们为用户提供了端口状态，这并非必需的，但咱们把它放进来主要是为了方便调试。

CONNECTING = 0
OPEN = 1
CLOSED = 2

function connect(){  
try{  

var socket;  
var host ="ws://localhost:8000/socket/server/startDaemon.php";  
var socket =new WebSocket(host);  

        message('<p class="event">Socket Status: '+socket.readyState);  

        socket.onopen =function(){  
             message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
        }  

        socket.onmessage =function(msg){  
             message('<p class="message">Received: '+msg.data);  
        }  

        socket.onclose =function(){  
             message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
        }             

    } catch(exception){  
         message('<p>Error'+exception);  
    }  
}

　message()函数很简单,它将咱们想展示给用户的文本填入chat log容器内。咱们在socket事件函数中为段落(<p>)标签建立适当的class，咱们在message函数中只有一个段落结束标签。

function message(msg){  
    $('#chatLog').append(msg+'</p>');  
}

目前的成果

　　若是你已按上面教程循序渐进的作的话，很好，咱们已经建立了 HTML/CSS 模板、建立并创建Websocket链接、经过建立链接保持用户的进展更新。

第七步：发送数据
　　如今咱们已经有了提交按钮，但咱们还须要监听用户按下键盘的事件，并运行send函数，下面的’13′即是回车键对应的ASCII码。

$('#text').keypress(function(event) {  
if (event.keyCode =='13') {  
        send();  
    }  
});

下面是send()函数：

function send(){  

var text = $('#text').val();  
if(text==""){  
        message('<p class="warning">Please enter a message');  
return ;  
    }  
try{  
        socket.send(text);  
        message('<p class="event">Sent: '+text)  
    } catch(exception){  
    message('<p class="warning"> Error:'+ exception);  
    }  

    $('#text').val("");  

}

下面咱们须要：

1socket.send();

　　那些额外的代码作了如下工做：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

　　关闭Socket
　　关闭Socket操做至关简单，添加对断开链接按钮的click事件监听就能够。

$('#disconnect').click(function(){  
    socket.close();  
});

完整JavaScript代码

    $(document).ready(function() {

        if(!("WebSocket"in window)){
            $('#chatLog, input, button, #examples').fadeOut("fast");
            $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
        }else{
            //The user has WebSockets  
            connect();
            function connect(){
                var socket;
                var host ="ws://localhost:8000/socket/server/startDaemon.php";

                try{
                    var socket =new WebSocket(host);

                    message('<p class="event">Socket Status: '+socket.readyState);

                    socket.onopen =function(){
                        message('<p class="event">Socket Status: '+socket.readyState+' (open)');
                    }

                    socket.onmessage =function(msg){
                        message('<p class="message">Received: '+msg.data);
                    }

                    socket.onclose =function(){
                        message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
                    }

                } catch(exception){
                    message('<p>Error'+exception);
                }

                function send(){
                    var text = $('#text').val();

                    if(text==""){
                        message('<p class="warning">Please enter a message');
                        return ;
                    }
                    try{
                        socket.send(text);
                        message('<p class="event">Sent: '+text)

                    } catch(exception){
                        message('<p class="warning">');
                    }
                    $('#text').val("");
                }

                function message(msg){
                    $('#chatLog').append(msg+'</p>');
                }

                $('#text').keypress(function(event) {
                    if (event.keyCode =='13') {
                        send();
                    }
                });

                $('#disconnect').click(function(){
                    socket.close();
                });

            }//End connect  

        }//End else  

    });

第九步：运行WebSocket服务器
　　咱们要输入一些命令行，XAMPP提供了比较方便的shell选项。点击XAMPP控制面板的’shell’按钮并输入：php -q path\to\server.php如今你已经运行了WebSocket服务器！

　　大功告成！
　　当页面读取后，将尝试建立一个WebSocket链接，而后用户能够输入信息并从服务器接收信息。

　　感谢你们耐心阅读本教程，但愿你能从中学到有用的知识，HTML5 WebSocket的确使人兴奋不已！你们能够经过The WebSocket API了解HTML5 WebSocket的最新动态。点击这里下载源文件

文章来源：HTML5 WebSockets 基础使用分享

1. html5 Websockets development guidance
2. cesium基础使用分享
3. 使用 WebSockets 进行 HTML5 视频直播
4. HTML5 WebSockets+NodeJs 实例教程
5. WebSockets
6. HTML5表格元素的分享！（基础分享，大神勿喷！）
7. HTML5 - 3.基础
8. HTML5学习笔记(七)-WebSockets API
9. 【分享】使用HTML5的10大缘由
10. 关于HTML5基础
更多相关文章...
• Kotlin 基础语法 - Kotlin 教程
• Scala 基础语法 - Scala教程
• Composer 安装与使用
• 使用Rxjava计算圆周率