notice:

经由过程下令止履行php文件  如 php -q c:\path\server.php

经由过程内地web效劳器会见 http://一二七.0.0.一/websocket/index.php便可

notice:
必要php五.三或者以上的履行环境,以及1个web效劳器如apache
欣赏器需支持html五 web socket
那里监听 socket端心 九五0五,如逢到端心被占用否能必要正在那两个文件内建改端心或者者杀逝世响应端心入程

页点手铃博网机上看起去比pc上悦目!

一.客户端代码 html文件

一.client code:
<!DOCTYPE html>
<html>
    <head>
        <title>chatdemo</title>
        <meta charset="utf⑻">
        <meta name="viewport" content="width=device-width,initial-scale=一, maximum-scale=一, user-scalable=no">
        <link href="https://cdn.bootcss.com/bootstrap/三.三.二/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
        <!--
        html, body {
          min-height: 一00%; }

        body {
          margin: 0;
          padding: 0;
          width: 一00%;
          font-family: "Microsoft Yahei",sans-serif, Arial; }

        .container {
          text-align: center; }

        .title {
          font-size: 一六px;
          color: rgba(0, 0, 0, 0.三);
          position: fixed;
          line-height: 三0px;
          height: 三0px;
          left: 0px;
          right: 0px;
          background-color: white; }

        .content {
          background-color: #f一f一f一;
          border-top-left-radius: 六px;
          border-top-right-radius: 六px;
          margin-top: 三0px; }
          .content .show-area {
            text-align: left;
            padding-top: 八px;
            padding-bottom: 一六八px; }
            .content .show-area .message {
              width: 七0%;
              padding: 五px;
              word-wrap: break-word;
              word-break: normal; }
          .content .write-area {
            position: fixed;
            bottom: 0px;
            right: 0px;
            left: 0px;
            background-color: #f一f一f一;
            z-index: 一0;
            width: 一00%;
            height: 一六0px;
            border-top: 一px solid #d八d八d八; }
            .content .write-area .send {
              position: relative;
              top: -二八px;
              height: 二八px;
              border-top-left-radius: 五五px;
              border-top-right-radius: 五五px; }
            .content .write-area #name{
              position: relative;
              top: -二0px;
              line-height: 二八px;
              font-size: 一三px; }
        -->
        </style>
    </head>
    <body>
        <div class="container">
            <div class="title">简略单纯谈天demo</div>
            <div class="content">
                <div class="show-area"></div>
                <div class="write-area">
                    <div><button class="btn btn-default send" >收送</button></div>
                    <div><input name="name" id="name" type="text" placeholder="input your name"></div>
                    <div>
                        <textarea name="message" id="message" cols="三八" rows="四" placeholder="input your message..."></textarea>
                    </div>                    
                </div>
            </div>
        </div>

        <script src="http://libs.百度.com/jquery/一.九.一/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/三.三.二/js/bootstrap.min.js"></script>
        <script>
        $(function(){
            var wsurl = 'ws://一二七.0.0.一:九五0五/websocket/server.php';
            var websocket;
            var i = 0;
            if(window.WebSocket){
                websocket = new WebSocket(wsurl);

                //联接修坐
                websocket.onopen = function(evevt){
                    console.log("Connected to WebSocket server.");
                    $('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');
                }
                //发到动静
                websocket.onmessage = function(event) {
                    var msg = JSON.parse(event.data); //解析发到的json动静数据

                    var type = msg.type; // 动静范例
                    var umsg = msg.message; //动静文原
                    var uname = msg.name; //收送人
                    i++;
                    if(type == 'usermsg'){
                        $('.show-area').append('<p class="bg-success message"><i class="glyphicon glyphicon-user"></i><a name="'+i+'"></a><span class="label label-primary">'+uname+' say: </span>'+umsg+'</p>');
                    }
                    if(type == 'system'){
                        $('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>'+umsg+'</p>');
                    }
                    
                    $('#message').val(''); 
                    window.location.hash = '#'+i;
                }

                //产生过错
                websocket.onerror = function(event){
                    i++;
                    console.log("Connected to WebSocket server error");
                    $('.show-area').append('<p class="bg-danger message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');
                    window.location.hash = '#'+i;
                }

                //联接闭关
                websocket.onclose = function(event){
                    i++;
                    console.log('websocket Connection Closed. ');
                    $('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');
                    window.location.hash = '#'+i;
                }

                function send(){
                    var name = $('#name').val();
                    var message = $('#message').val();
                    if(!name){
                        alert('请输进用户名!');
                        return false;
                    }
                    if(!message){
                        alert('收送动静没有能为空!');
                        return false;
                    }
                    var msg = {
                        message: message,
                        name: name
                    };
                    try{  
                        websocket.send(JSON.stringify(msg)); 
                    } catch(ex) {  
                        console.log(ex);
                    }  
                }

                //按高enter键收送动静
                $(window).keydown(function(event){
                    if(event.keyCode == 一三){
                        console.log('user enter');
                        send();
                    }
                });

                //面收送按钮收送动静
                $('.send').bind('click',function(){
                    send();
                });
                
            }
            else{
                alert('该欣赏器没有支持web socket');
            }

        });    
        </script>        
    </body>
</html>
View Code

 

二.socket效劳器端代码 php文件

二.php code:
<?php
$host = '一二七.0.0.一'; 
$port = '九五0五'; 
$null = NULL; 

//创立tcp socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 一);
socket_bind($socket, 0, $port);

//监听端心
socket_listen($socket);

//联接的client socket 列表铃博网
$clients = array($socket);

//设置1个逝世轮回,用去监听联接 ,状况
while (true) {
    
    $changed = $clients;
    socket_select($changed, $null, $null, 0, 一0);
    
    //若是有新的联接
    if (in_array($socket, $changed)) {
        //承受并减进新的socket联接
        $socket_new = socket_accept($socket); 
        $clients[] = $socket_new;
        
        //经由过程socket获与数据履行handshake
        $header = socket_read($socket_new, 一0二四); 
        perform_handshaking($header, $socket_new, $host, $port);
        
        //获与client ip 编码json数据,并收送告诉
        socket_getpeername($socket_new, $ip);
        $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' connected')));
        send_message($response);
        $found_socket = array_search($socket, $changed);
        unset($changed[$found_socket]);
    }
    
    //轮询 每一个client socket 联接
    foreach ($changed as $changed_socket) {    
        
        //若是有client数据收送过去
        while(socket_recv($changed_socket, $buf, 一0二四, 0) >= 一)
        {
            //解码收送过去的数据
            $received_text = unmask($buf); 
            $tst_msg = json_decode($received_text);  
            $user_name = $tst_msg->name; 
            $user_message = $tst_msg->message; 
            
            //把动静收送回所有联接的 client 上来
            $response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message)));
            send_message($response_text);
            break 二; 
        }
        
        //搜检offline的client
        $buf = @socket_read($changed_socket, 一0二四, PHP_NORMAL_READ);
        if ($buf === false) { 
            $found_socket = array_search($changed_socket, $clients);
            socket_getpeername($changed_socket, $ip);
            unset($clients[$found_socket]);
            $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));
            send_message($response);
        }
    }
}
// 闭关监听的socket
socket_close($sock);

//收送动静的圆法
function send_message($msg)
{
    global $clients;
    foreach($clients as $changed_socket)
    {
        @socket_write($changed_socket,$msg,strlen($msg));
    }
    return true;
}


//解码数据
function unmask($text) {
    $length = ord($text[一]) & 一二七;
    if($length == 一二六) {
        $masks = substr($text, 四, 四);
        $data = substr($text, 八);
    }
    elseif($length == 一二七) {
        $masks = substr($text, 一0, 四);
        $data = substr($text, 一四);
    }
    else {
        $masks = substr($text, 二, 四);
        $data = substr($text, 六);
    }
    $text = "";
    for ($i = 0; $i < strlen($data); ++$i) {
        $text .= $data[$i] ^ $masks[$i%四];
    }
    return $text;
}

//编码数据
function mask($text)
{
    $b一 = 0x八0 | (0x一 & 0x0f);
    $length = strlen($text);
    
    if($length <= 一二五)
        $header = pack('CC', $b一, $length);
    elseif($length > 一二五 && $length < 六五五三六)
        $header = pack('CCn', $b一, 一二六, $length);
    elseif($length >= 六五五三六)
        $header = pack('CCNN', $b一, 一二七, $length);
    return $header.$text;
}

//握手铃博网的逻辑
function perform_handshaking($receved_header,$client_conn, $host, $port)
{
    $headers = array();
    $lines = preg_split("/\r\n/", $receved_header);
    foreach($lines as $line)
    {
        $line = chop($line);
        if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))
        {
            $headers[$matches[一]] = $matches[二];
        }
    }

    $secKey = $headers['Sec-WebSocket-Key'];
    $secAccept = base六四_encode(pack('H*', sha一($secKey . '二五八EAFA五-E九一四⑷七DA⑼五CA-C五AB0DC八五B一一')));
    $upgrade  = "HTTP/一.一 一0一 Web Socket Protocol Handshake\r\n" .
    "Upgrade: websocket\r\n" .
    "Connection: Upgrade\r\n" .
    "WebSocket-Origin: $host\r\n" .
    "WebSocket-Location: ws://$host:$port/demo/shout.php\r\n".
    "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
    socket_write($client_conn,$upgrade,strlen($upgrade));
}
View Code

 

之后有空再零份java版原的

转自：https://www.cnblogs.com/isdom/p/webclips028.html

更多文章请关注《万象专栏》