websocket+php+socket聊天室

原创 2017年09月14日 11:11:32

客户端(聊天前端页面):

<!DOCTYPE html>
<html>
<head>
  <title>mychat_socket</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>


服务端(php+socket):


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


相关文章推荐

构建基于socket的HTTP请求类[转]

现在做一些Api开发的时候官方会有一些SDK,这些SDK其实原理都是通过socket来通讯的示例类...

php-socket理论(01)

建立Socket连接至少需要一对套接字,其中一个运行于客户端,称为ClientSocket ,另一个运行于服务器端,称为ServerSocket 。 套接字之间的连接过程分为三个步骤:服务器监听,客...

Node.js+Socket.IO实现的WebSocket群聊天室源码

首先上图上实例   聊天室地址:http://chat.52itstyle.com WebSocket简介 谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,...

即时通讯之Socket.IO的学习,及使用nodejs 搭建websocket 聊天室

以下转自标点符 即时通讯之Socket.IO的学习: Web领域的实时推送技术,也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景,比...

入门WebSocket和socket.io,实现在线实时聊天室

为什么会有WebSocket协议呢?因为HTTP有一个缺陷:通信只能由客户端发起。HTTP 协议做不到服务器主动向客户端推送信息。WebSocket协议是双向的,服务器端也可以主动向客户端发起请求。后...

Node.js websocket 使用 socket.io库实现实时聊天室

认识websocketWebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。其实websock...

利用Swoole实现PHP+websocket 聊天室

原文:http://www.jianshu.com/p/fedbb9d2d999# 作者:西岭老湿 websocket Websocket只是一个网络通信协议 就像 http、ftp等都是网络通信...
  • myboyli
  • myboyli
  • 2016年10月25日 14:07
  • 272

利用Swoole实现PHP+websocket 聊天室

websocketWebsocket只是一个网络通信协议 就像 http、ftp等都是网络通信的协议;不要多想; 相对于HTTP这种非持久的协议来说,Websocket是一个持久化网络通信的协议;...

php基于websocket实现的在线聊天室

本文实例讲述了php基于websocket实现的在线聊天室。分享给大家供大家参考。具体如下: 1、前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想p...

发一个WebSocket+PHP聊天室-PHP多进程实时服务器推送技术

这一阵子在家写了个聊天室,给大家献上代码,有用到的可以拿去用。 先介绍下聊天室的特性: 1、服务端采用纯php开发,不依赖php-fpm、nginx、或者apache数据库等,部署简单 2、...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:websocket+php+socket聊天室
举报原因:
原因补充:

(最多只允许输入30个字)