用swoole实现简单IM聊天室demo

写在前面:本博文内容取自 http://www.php.cn/course/658.html 课程内容,课程讲的不深,但作为swoole入门教程是肯定够了,感兴趣的同学可以去学习一下

博主最近开始学习swoole，闲来没事就想与大家分享一下这个用swoole+websocket实现的简单聊天室demo
开发环境:
Centos 7,PHP 版本7.0.32
前端index.html页面:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title id="myTitle">IM</title>
</head>
<style>
body {
  background-color:green;
}
#myname {
  width:120px;
  height:30px;
}
.setUserName {
  width:80px;
  height:30px;
}
#msg{
  margin:80px 300px;
  width:450px;
  height:200px;
  background-color:white;
}
.show_send{
  margin:0px 300px;
}
#text{
 width:200px;
 height:50px;
}
.send_button{
 width:80px;
 height:30px;
}
</style>
<body>
  <h1>swoole-websocket 及时通讯demo</h1>
   <!--发送信息-->
   <div id="send_msg" class="main box-shadow" style="display:none;">
       <div id="msg"></div>
       <div class="show_send">
            <input type="text" id="text"><input class="send_button" value="发送数据" type="submit" onclick="send_message()">
       </div>
   </div>
   <!--设置昵称-->
   <div id="setName" class="box-shadow" style="display:block;margin:200px 150px 200px 550px;">
       <input type="text" id="myname"/>
       <input type="submit" class="setUserName" value="设置昵称" onclick="send_name()">
   </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var msg = document.getElementById("msg");
var wsServer = 'ws://192.168.8.131:9502';
var websocket = new WebSocket(wsServer);
websocket.onopen = function(evt){
 // msg.innerHTML = websocket.readyState;
  /*
   connecting 0 
   open 1
   closing 2
   closed 3
 
  */
}
websocket.onmessage = function(evt){
    msg.innerHTML += evt.data+'<br />';
   console.log('从服务器获取到的数据:'+ evt.data);
}
websocket.onclose = function(evt){
   console.log("服务器拒绝");
}
websocket.onerror = function(evt,e){
   console.log('错误:'+evt.data);
}
function send_message(){
   var text = document.getElementById('text').value;
   document.getElementById('text').value = '';
   websocket.send(text);
}
function send_name(){
   var text = document.getElementById('myname').value;
   websocket.send("#name#"+text);
   var myTitle = document.getElementById("myTitle");
   myTitle.innerHTML = "IM" +text;
  alert("设置成功");
  var setName = document.getElementById("setName");
  setName.style.display = "none";
  var send_msg = document.getElementById("send_msg");
  send_msg.style.display = "block";
}
</script>
</html>

服务端index.php代码:

<?php
//服务器代码
//创建websocket 服务器
$ws = new swoole_websocket_server("0.0.0.0",9502);
// open
$ws->on('open',function($ws,$request){
    echo "新用户 $request->fd 加入。\n";
    $GLOBALS['fd'][$request->fd]['id'] = $request->fd;//设置用户id
    $GLOBALS['fd'][$request->fd]['name'] = '匿名用户';//设置用户名

});
//message
$ws->on('message',function($ws,$request){
    $msg = $GLOBALS['fd'][$request->fd]['name'].":".$request->data."\n";
    if(strstr($request->data,"#name#")){//用户设置昵称
        $GLOBALS['fd'][$request->fd]['name'] = str_replace("#name#",'',$request->data);

    }else{//进行用户信息发送
        //发送每一个客户端
        foreach($GLOBALS['fd'] as $i){
            $ws->push($i['id'],$msg);
        }
    }
});
//close
$ws->on('close',function($ws,$request){
    echo "客户端-{$request} 断开连接\n";
    unset($GLOBALS['fd'][$request]);//清楚连接仓库
});
$ws->start();

运行程序:
在这里插入图片描述
浏览器输入页面所在地址即可进行测试:

用swoole实现简单IM聊天室demo

猜你喜欢