渐悟分享-基于Swoole的websocket写的小小公共聊天室

基于Swoole的websocket写的小小公共聊天室

Swoole 2019-07-05 16:29 by admin 336

服务端

<?php

//lunix
//查看端口   netstat -apn|grep 2345
//关闭端口进程  kill -9 端口id


//所以的客户端都可以链接
$server = new swoole_websocket_server('0.0.0.0',3456);


$server->set(array(
    'reactor_num' => 1, //reactor thread num
    'worker_num' => 1,    //worker process num
    'backlog' => 128,   //listen backlog
    'max_request' => 50,
    'daemonize' => 1
));



//某个客户端链接上来
$server->on('open',function(){
   echo '有人来了';
});

//某个客户端发来消息
//fd  用户唯一标示
$server->on('message',function($server,$data){

   

   $num = count($server->connection_list());

   $msg = $data->data;
   
   $msg = explode(':', $msg);
   

   if($msg[0] == 'name'){
      $info =date('md H:i:s'). '  欢迎'.$msg[1].'加入张先生开发的聊天室,当前在线人数:'.$num;

      //查看有哪些人连接上了
      // var_dump($server->connection_list());

      foreach ($server->connection_list() as $fd) {
         $server->push($fd,$info);
      }


   }elseif($msg[0] == 'message'){

      foreach ($server->connection_list() as $fd) {
         $server->push($fd,date('md H:i:s').'   '.$msg[1]);
      }
   }

   echo '有人发消息了';
});

// 某个客户端关了链接
$server->on('close',function(){
   echo '有人关闭了';
});


//启动服务
$server->start();

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天一下</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #recv{
            margin-top: 10px;
 }
    </style>
</head>
<body>


<div class="container">

    <h1 style="text-align: center">公共聊天室</h1>

    <div class="row" >


        <div role="form">

            <div class="form-group">
                <label for="name">名称</label>
                <input id="name" type="text" class="form-control" value="">
            </div>
            <div class="form-group">
                <label for="sendTxt">输入消息</label>
                <textarea  id="sendTxt" class="form-control" ></textarea>
            </div>

            <button id="sendBtn" class="btn btn-primary btn-block btn-lg">发送</button>
            <div id="recv"></div>
        </div>



    </div>
</div>


<script>
    function getName(){
        var familyNames = new Array(
            "赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈",
 "褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许",
 "何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏",
 "陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章",
 "云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦",
 "昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳",
 "酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺",
 "倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常",
 "乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余",
 "元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹"
 );
 var givenNames = new Array(
            "子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛",
 "昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊",
 "东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政",
 "美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建",
 "建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋",
 "涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
 "子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡",
 "佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕",
 "佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵",
 "清妍", "诗悦", "嘉乐", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌"
 );
 var i = parseInt(10* Math.random())* + parseInt(10 * Math.random());
 var familyName = familyNames[i];
 var j = parseInt(10 * Math.random())* + parseInt(10 * Math.random());
 var givenName = givenNames[i];
 var name = familyName + givenName;
 var x = document.getElementById("name");
 console.log(name)
        x.value = name
 }
    getName()
</script>


<script>
    if ("WebSocket" in window){



        var websocket = new WebSocket("ws://62.234.73.235:3456");
 websocket.onopen = function(){
            console.log('websocket open');
 var name = document.getElementById('name').value;
 var html = 'name:' + name
            websocket.send(html)
            var pp = document.createElement("p")
            pp.innerHTML = '<span style="color: #23ff31"></span>'+'连接上了';
 document.getElementById('recv').appendChild(pp);
 }
        websocket.onclose = function(){
            console.log('websocket close')
        }
        websocket.onmessage = function(e){
            console.log('接收数据:'+e.data);
 var pp = document.createElement("p")
            pp.innerHTML = '<span style="color: #1217ff"></span>'+e.data;
 document.getElementById('recv').prepend(pp);
 // document.getElementById('recv').innerHTML = e.data;
 }
        document.getElementById('sendBtn').onclick = function(){
            var txt = document.getElementById('sendTxt').value;
 var name = document.getElementById('name').value;
 var html = 'message:' + name+'说-> '+txt
            console.log('发送数据:'+html)
            // var pp = document.createElement("p")
            // pp.innerHTML = '<span style="color: red">我说: </span>'+txt;
            // document.getElementById('recv').appendChild(pp);

 websocket.send(html)
            var txt = document.getElementById('sendTxt').value = ' ';

 }
    }

</script>
</body>
</html>

---------------------
作者：前世的我
来源：前世的我
原文：http://www.w55.site/blog/article/look/id/33.html
版权声明：本文为博主原创文章，转载请附上博文链接！

渐悟分享

基于Swoole的websocket写的小小公共聊天室

热门文章

相关文章