[实践OK]WebSocket的JavaScript例子，结合swoole的PHP扩展及swoole_framework提供的example来编写并摸索备案。

Fri, 22 Aug 2014 09:08:20 +0000

背景：swoole有一个Websocket示例，我作为swoole的顾问,群里反映cocos2dx下的websocket长连接，语言是不一样，但websocket是一样的，swoole是支持Websocket的，作下简单实践。
WebSocket的JavaScript例子，一个WebSocket的简单Echo例子：
例子代码来自：http://www.websocket.org/echo.html
上面这个链接可以当作一个websocket的工具调试并使用。

一、当然，得下载swoole服务扩展并安装：
git clone https://github.com/swoole/swoole-src.git
You should add "extension=swoole.so" to php.ini
二、动态服务端代码：
cd /data/codesdev/swoole/
git clone https://github.com/matyhtf/swoole_framework.git
/data/codesdev/swoole/swoole_framework/examples/websocket_server.php

<?php
define('DEBUG', 'on');
define("WEBPATH", str_replace("\\","/", __DIR__));
require __DIR__ . '/../libs/lib_config.php';

class WebSocket extends Swoole\Network\Protocol\WebSocket
{
    function onStart($serv, $worker_id = 0)
    {
        //$serv->addTimer(1000);
        parent::onStart($serv, $worker_id);
    }
    /**
     * 下线时，通知所有人
     */
    function onClose($serv, $client_id, $from_id)
    {
        //将下线消息发送给所有人
        //$this->log("onOffline: " . $client_id);
        //$this->broadcast($client_id, "onOffline: " . $client_id);
        parent::onClose($serv, $client_id, $from_id);
    }

/**
     * 接收到消息时
     * @see WSProtocol::onMessage()
     */
    function onMessage($client_id, $ws)
    {
        $this->log("onMessage: ".$client_id.' = '.$ws['message']);
        $this->send($client_id, "Server: ".$ws['message']);
    //$this->broadcast($client_id, $ws['message']);
    }

function broadcast($client_id, $msg)
    {
        foreach ($this->connections as $clid => $info)
        {
            if ($client_id != $clid)
            {
                $this->send($clid, $msg);
            }
        }
    }

function onTimer($serv, $interval)
    {
        echo "timer $interval\n";
    }
}

//require __DIR__'/phar://swoole.phar';
Swoole\Config::$debug = true;
Swoole\Error::$echo_html = false;

$AppSvr = new WebSocket();
$AppSvr->loadSetting(__DIR__."/swoole.ini"); //加载配置文件
$AppSvr->setLogger(new \Swoole\Log\EchoLog(true)); //Logger

/**
 * 如果你没有安装swoole扩展，这里还可选择
 * BlockTCP 阻塞的TCP，支持windows平台
 * SelectTCP 使用select做事件循环，支持windows平台
 * EventTCP 使用libevent，需要安装libevent扩展
 */
$enable_ssl = true;
$server = new \Swoole\Network\Server('0.0.0.0', 9443, $enable_ssl);
$server->setProtocol($AppSvr);
//$server->daemonize(); //作为守护进程
$server->run(array(
    'worker_num' => 1,
    'ssl_key_file' => __DIR__.'/ssl/ssl.key',
    'ssl_cert_file' => __DIR__.'/ssl/ssl.crt',
    //'max_request' => 1000,
    //'ipc_mode' => 2,
    //'heartbeat_check_interval' => 40,
    //'heartbeat_idle_time' => 60,
));

上面是swoole_framework提供的代码，我们就直接运行这个服务端的server侦听9443端口：
php websocket_server.php

三、静态Js代码，通过firefox访问下，当然其他支持websocket的浏览器也可以，这块暂没从swoole_framework里摘，在网上摘的js，后面会补上从哪儿摘来的Url地址：
/data/htdocs/tools.jackxiang.com/websocket.html
vi websocket.html

<!DOCTYPE html>  
<meta charset="utf-8" />  
<title>WebSocket Test</title>  
<script language="javascript"type="text/javascript">  
    var wsUri ="ws://119.10.6.23:9443"; 
    var output;  
     
    function init() { 
        output = document.getElementById("output"); 
        //console.log(output);
        testWebSocket(); 
    }  
  
    function testWebSocket() { 
        websocket = new WebSocket(wsUri); 
        websocket.onopen = function(evt) { 
            onOpen(evt) 
        }; 
        websocket.onclose = function(evt) { 
            onClose(evt) 
        }; 
        websocket.onmessage = function(evt) { 
            onMessage(evt) 
        }; 
        websocket.onerror = function(evt) { 
            onError(evt) 
        }; 
    }  
  
    function onOpen(evt) { 
        writeToScreen("CONNECTED"); 
        doSend("WebSocket rocks"); 
    }  
  
    function onClose(evt) { 
        writeToScreen("DISCONNECTED"); 
    }  
  
    function onMessage(evt) { 
        writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>'); 
        websocket.close(); 
    }  
  
    function onError(evt) { 
        writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data); 
    }  
  
    function doSend(message) { 
        writeToScreen("SENT: " + message);  
        websocket.send(message); 
    }  
  
    function writeToScreen(message) { 
        var pre = document.createElement("p"); 
        pre.style.wordWrap = "break-word"; 
        pre.innerHTML = message; 
        output.appendChild(pre); 
    }  
  
    window.addEventListener("load", init, false);  
</script>  
<h2>WebSocket Test</h2>  
<div id="output"></div>  
</html>

四、在Firefox或chrome下访问这个支持websocket的Js代码：
WebSocket Test
CONNECTED
SENT: WebSocket rocks
RESPONSE: Server: WebSocket rocks
DISCONNECTED

说明这个php是真支持websocket的，否则不会输入什么就输出什么，得证。

参考：http://www.xyhtml5.com/websocket-javascript-example.html
——后来发现swoole_framework里的example里居然有对这个websocket的php配套的简单测试代码——
后记，其实swoole_framework下提供了和websocket相关的html测试及php客户端测试：
websocket_client.html  websocket_client.php   websocket_server.php
（1）前端：websocket_client.htm

把wss换成ws，wss好像是https的websocket：
//var wsServer = 'wss://127.0.0.1:9443'; //IP也换下
var wsServer = 'ws://119.10.6.23:9443';
访问下：http://tools.jackxiang.com/websocket_client.html
Connected to WebSocket server.
这个实例不如上面复杂，但服务端确实收到消息了：
[2014-08-22 17:16:47]   INFO    new http request. fd=12
[2014-08-22 17:16:47]   INFO    WebSocket connection #12 is connected

（2）后端：websocket_client.php 这里可能要结合swoole_framework的类java包机制：

修改9503修改为9443，运行测试下：
[root@jackxiang examples]# php  websocket_client.php
Received from server: Server: hello world
Received from server: Server: hello world
Received from server: Server: hello world
Received from server: Server: hello world
Received from server: Server: hello world
Received from server: Server: hello world
Received from server: Server: hello world
^C
得证。

[评论] [实践OK]WebSocket的JavaScript例子，结合swoole的PHP扩展及swoole_framework提供的example来编写并摸索备案。

Thu, 01 Jan 1970 00:00:00 +0000

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除

[实践OK]WebSocket的JavaScript例子，结合swoole的PHP扩展及swoole_framework提供的example来编写并摸索备案。

[评论] [实践OK]WebSocket的JavaScript例子，结合swoole的PHP扩展及swoole_framework提供的example来编写并摸索备案。

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除