notice:

通过命令行执行php文件  如 php -q c:\path\server.php

通过本地web服务器访问 http://127.0.0.1/websocket/index.php即可

notice: 
需要php5.3或以上的执行环境,和一个web服务器如apache
浏览器需支持html5 web socket
这里监听 socket端口 9505,如遇到端口被占用可能需要在这两个文件内修改端口或者杀死相应端口进程

页面手机上看起来比pc上好看!

1.客户端代码 html文件

1.client code:

<!DOCTYPE html>

<html>

    <head>

        <title>chatdemo</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">

        <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

        <style type="text/css">

        <!--

        html, body {

          min-height: 100%; }

        body {

          margin: 0;

          padding: 0;

          width: 100%;

          font-family: "Microsoft Yahei",sans-serif, Arial; }

        .container {

          text-align: center; }

        .title {

          font-size: 16px;

          color: rgba(0, 0, 0, 0.3);

          position: fixed;

          line-height: 30px;

          height: 30px;

          left: 0px;

          right: 0px;

          background-color: white; }

        .content {

          background-color: #f1f1f1;

          border-top-left-radius: 6px;

          border-top-right-radius: 6px;

          margin-top: 30px; }

          .content .show-area {

            text-align: left;

            padding-top: 8px;

            padding-bottom: 168px; }

            .content .show-area .message {

              width: 70%;

              padding: 5px;

              word-wrap: break-word;

              word-break: normal; }

          .content .write-area {

            position: fixed;

            bottom: 0px;

            right: 0px;

            left: 0px;

            background-color: #f1f1f1;

            z-index: 10;

            width: 100%;

            height: 160px;

            border-top: 1px solid #d8d8d8; }

            .content .write-area .send {

              position: relative;

              top: -28px;

              height: 28px;

              border-top-left-radius: 55px;

              border-top-right-radius: 55px; }

            .content .write-area #name{

              position: relative;

              top: -20px;

              line-height: 28px;

              font-size: 13px; }

        -->

        </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="38" rows="4" placeholder="input your message..."></textarea>

                    </div>

                </div>

            </div>

        </div>

        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

        <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

        <script>

        $(function(){

            var wsurl = 'ws://127.0.0.1:9505/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 == 13){

                        console.log('user enter');

                        send();

                    }

                });

                //点发送按钮发送消息

                $('.send').bind('click',function(){

                    send();

                });

            }

            else{

                alert('该浏览器不支持web socket');

            }

        });

        </script>

    </body>

</html>

2.socket服务器端代码 php文件

2.php code:

<?php

$host = '127.0.0.1';

$port = '9505';

$null = NULL; 

//创建tcp socket

$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);

socket_bind($socket, 0, $port);

//监听端口

socket_listen($socket);

//连接的client socket 列表

$clients = array($socket);

//设置一个死循环,用来监听连接 ,状态

while (true) {

    $changed = $clients;

    socket_select($changed, $null, $null, 0, 10);

    //如果有新的连接

    if (in_array($socket, $changed)) {

        //接受并加入新的socket连接

        $socket_new = socket_accept($socket);

        $clients[] = $socket_new;

        //通过socket获取数据执行handshake

        $header = socket_read($socket_new, 1024);

        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, 1024, 0) >= 1)

        {

            //解码发送过来的数据

            $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 2;

        }

        //检查offline的client

        $buf = @socket_read($changed_socket, 1024, 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[1]) & 127;

    if($length == 126) {

        $masks = substr($text, 4, 4);

        $data = substr($text, 8);

    }

    elseif($length == 127) {

        $masks = substr($text, 10, 4);

        $data = substr($text, 14);

    }

    else {

        $masks = substr($text, 2, 4);

        $data = substr($text, 6);

    }

    $text = "";

    for ($i = 0; $i < strlen($data); ++$i) {

        $text .= $data[$i] ^ $masks[$i%4];

    }

    return $text;

}

//编码数据

function mask($text)

{

    $b1 = 0x80 | (0x1 & 0x0f);

    $length = strlen($text);

    if($length <= 125)

        $header = pack('CC', $b1, $length);

    elseif($length > 125 && $length < 65536)

        $header = pack('CCn', $b1, 126, $length);

    elseif($length >= 65536)

        $header = pack('CCNN', $b1, 127, $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[1]] = $matches[2];

        }

    }

    $secKey = $headers['Sec-WebSocket-Key'];

    $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));

    $upgrade  = "HTTP/1.1 101 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));

}

最新文章

  1. C# @符号的作用， 可定义关键字为变量名
  2. Java知多少（完结）
  3. 本地计算机上的MSSQLSERVER服务启动后又停止了。一些服务自动停止，如果它们没有什么可做的
  4. Poj 2371 Questions and answers(排序)
  5. blend
  6. sgu194 Reactor Cooling【无源汇有上下界可行流】
  7. java面向对象--继承与多态
  8. iOS底层学习-KVC使用实践以及实现原理
  9. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
  10. 云计算大数据：Xen、KVM、VMware、hyper-v等虚拟化技术的比较
  11. multiWriter.go
  12. MySQL数据库的定时备份
  13. Spring Boot 定时任务使用
  14. SQL Server 2016 查询存储性能优化小结
  15. html5 javascript 表单练习案例
  16. django 环境配置.
  17. python第四十课——构造函数
  18. LoadRunner 检查点函数总结
  19. 继承MonoBehaviour类的优缺点和相关报错
  20. COMP COMP-3

热门文章

  1. mysql - 引擎与锁的概念( 基础 )
  2. Python 装饰器实现单列模式
  3. Laravel 项目架构 弹性、可维护性
  4. 062_判断用户输入的是 Yes 或 NO
  5. fft，ntt总结
  6. 【原创】导出aws ec2为csv
  7. http状态码-备查
  8. python对象调用父类的方法
  9. Intellij IDEA常用配置记录
  10. 定时检查SetUID 权限文件列表的脚本文件