簡単なチャットルームコード

前提条件
インストールswoole
フロントエンド

    
    



      

  :


    


    
    

                <button id="submit" style="float: right;height: 55px;width:50px;margin-right:45px;display: block;" onclick="send_msg();">  </button>
    </div>
</div>
<script>
    var name = ws = '' ;
    //  websock
    function chat() {
        var wsserver = 'ws://47.94.11.195:443';
        //  WebSocket      
        //ws  wss: // ip:port(   )
        ws = new WebSocket(wsserver);
        //          
        var sayContent = document.getElementById('sayContent');
        //onopen      
        ws.onopen = function (v) {
            var user = new Object();
            user.name = name;
            user.type = 1;//       
            var json = JSON.stringify(user);
            ws.send(json);//    
        }
        //onmessage         
        ws.onmessage = function (v) {
            var html = sayContent.innerHTML;
            sayContent.innerHTML = html + "<br>"+v.data;
        }
        //      
        ws.onclose = function (v) {
            var html = sayContent.innerHTML;
            sayContent.innerHTML = html + "<br>      !";
        }
    }
    //     
    function set_name() {
        name = document.getElementById('name').value;
        if(name == ''){
            alert('      !');
            return false;
        }
        document.getElementById('set_name').style.display='none';
        document.getElementById('chat').style.display='block';
        chat();
    }
    function send_msg() {
        var content = document.getElementById('content');
        if(content.value == ''){
            alert('       !');
            return false;
        }

        var msg = new Object();
        msg.content = content.value;
        msg.type = 2;
        var str = JSON.stringify(msg);
        ws.send(str);
    }
</script>


</code></pre> 
  <h3>  </h3> 
  <pre><code><?php $server = new swoole_websocket_server("0.0.0.0", 443);
$server-?>users = [];
$server->on('open', function (swoole_websocket_server $server, $request) {
    $server->users[$request->fd]['id'] = $request->fd;
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
    $data = json_decode($frame->data,true);
    if($data['type'] == 1){
        $server->users[$frame->fd]['name']=$data['name'];
        $server->push($frame->fd,'   ('.$data['name'].')     !');
    }else{
        foreach($server->users as $v){
            $server->push($v['id'], $server->users[$frame->fd]['name'].' :'.$data['content']);
        }
    }
});
$server->on('close', function ($ser, $fd) {
    file_put_contents('qq.txt',$server->users[$frame->fd],FILE_APPEND);
    unset($server->users[$frame->fd]);
});
$server->start();
</code></pre> 
  <pre><code><?php #    clientFds         websocket   
$clientFds = [];

#    websocket   
$server = new swoole_websocket_server("0.0.0.0", 8080);
#            
$server-?>on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) {
   # echo "server: handshake success with fd{$request->fd}<br>";
   #           ，           
   $clientFds[] = $request->fd;
});
#            
$server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) {
   # echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}<br>";
   # $server->push($frame->fd, "this is server");
   #         ，          
   foreach ($clientFds as $fd) {
      $server->push($fd, $frame->data);
   }
});
#            
$server->on('close', function ($ser, $fd) use (&$clientFds) {
   # echo "client {$fd} closed<br>";
   #           fd
   #    value          key
   $res = array_search($fd, $clientFds, true);
   unset($clientFds[$res]);
});
#    websocket   
$server->start();
</code></pre> 
  <pre><code>


   <meta charset="UTF-8"/>
   <title>WebSocket    </title>


<div id="main" style="width:600px;height: 200px; overflow: auto;border: solid 2px black;">
</div>
<textarea id="textarea"/>
<br/>
<input type="button" value="    " onclick="send()"/>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"/>
<script type="text/javascript">
    var name =prompt("       ","   "); //   input  
    //      web socket
    var ws = new WebSocket("ws://ip:8080");

    ws.onopen = function() {
        console.log("    ");
    };

    //         
    ws.onmessage = function (evt) {
        var data = evt.data;
        console.log("   socket     ，  ：" + data);
        $('#main').append("<p>" + data + "</p>");
    };

    function send() {
        var data = document.getElementById('textarea').value;
        ws.send(name+ ":"+ data);
    }

    ws.onclose = function() {
        //    websocket
        console.log("     ...");
    };
</script>


</code></pre> 
 </div> 
</div>
                            </div>
                        </div>