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));

}

　　

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));

}

我做的一个websocket的demo(php server)的更多相关文章

  1. 一个websocket的demo(php server)

    notice: 通过命令行执行php文件  如 php -q c:\path\server.php 通过本地web服务器访问 http://127.0.0.1/websocket/index.php即 ...

  2. hammer.js方法总结(只做了一个简单的demo)

    html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. WebSocket C# Demo

    WebSocket 规范 WebSocket 协议本质上是一个基于 TCP 的协议.为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTT ...

  4. 做为一个前端工程师，是往node方面转，还是往HTML5方面转

    文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...

  5. 高仿“点触验证码”做的一个静态Html例子

    先上源码: <html> <head> <title>TouClick - Designed By MrChu</title> <meta htt ...

  6. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  7. 实现一个websocket服务器-理论篇

    本文是Writing WebSocket servers的中文文档,翻译自MDNWriting WebSocket servers.篇幅略长,个人能力有限难免有所错误,抛砖引玉共同进步. websoc ...

  8. 做了一个vue的同步tree 的npm组件包

    前言:因为现成的tree组件没有找到.亦或是其依赖的其他东西太多,不太合适引入我们的项目,所以自己做了一个.大概样式: 在线例子: https://hamupp.github.io/t-vue-tre ...

  9. 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/

    最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...

随机推荐

  1. 项目托管到Github上

    一.注册github账号   首先需要注册一个github账号,注册地址:https://github.com 接着会来到这 然后会收到一封github发的邮件,进入邮箱验证 二.创建个人的githu ...

  2. Java使用Redisson分布式锁实现原理

    本篇文章摘自:https://www.jb51.net/article/149353.htm 由于时间有限,暂未验证 仅先做记录.有大家注意下哈(会尽快抽时间进行验证) 1. 基本用法 添加依赖 &l ...

  3. java类中成员的初始化顺序(一)

    类被创建之后的成员的初始化顺序到底是怎么样的? 首先 不考虑继承 package com; public class DemoOne { /** * 关于类的初始化顺序 */ //不考虑继承结构的情况 ...

  4. Jquery实现form表单提交后局部刷新页面的多种方法

    最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...

  5. [合集]解决Python报错：local variable 'xxx' referenced before assignment

    a = 1 def use(): print(a) #输出1 引用不会报错 a = 1 def use(): a = 3 print(a) #输出 3 重新赋值也不会报错. 局部变量会优先在函数内部去 ...

  6. 一文告诉你git如何使用

    提供简易教程学习网址 http://www.bootcss.com/p/git-guide/ git add . //提交至缓存 git commit -m '注释' //提交至本地 (git com ...

  7. 【代码笔记】iOS-获取现在的日历时间

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  8. Ubuntu搜索不到WiFi的解决办法

    时间:2018年1月25日 废话连篇:杭州下了第一场雪,冒险严寒来到实验室,打开电脑,纳尼连不上wifi了,好吧!不要被这件小事影响心情,开始修复了,经过一顿搜索,可能是因为驱动的问题,终端输入以下两 ...

  9. arcgis JavaScript 加载 mapbox地图

    mapbox 地图现在是越来越好看了, 随便试 /** * Created by Administrator on 2018/5/15 0015. */ import * as esriLoader ...

  10. Pig join用法举例

    jnd = join a by f1, b by f2;   join操作默认的是内连接,只有两边都匹配才会保留   需要用null补位的那边需要知道它的模式: 如果是左外连接,需要知道右边的数据集的 ...