PHP+swoole简易聊天室

最新推荐文章于 2024-05-25 09:43:11 发布

大博的博客

最新推荐文章于 2024-05-25 09:43:11 发布

阅读量872

点赞数 1

分类专栏： PHP 文章标签： PHP swoole HTML websocket

本文链接：https://blog.csdn.net/Da_Bo_/article/details/103323185

版权

PHP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

swoole，websocket简易聊天室

swoole，php扩展

websocket，H5新特性，全双工通讯的协议。

背景：一个小项目的群聊，在这之前使用过ajax轮循，但是无法达到效果，所以使用了websocket.
不说了上代码。
看前台代码：

前台部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title id="myTitle">IM</title>
</head>
<style>
body {
  background-color:gray;
}
#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://49.234.176.153:9500';
var websocket = new WebSocket(wsServer);
//连接成功 onopen函数不容更改
websocket.onopen = function(evt){
 // msg.innerHTML = websocket.readyState;
  /*
   connecting 0 
   open 1
   closing 2
   closed 3
 
  */
}
//发送消息 onmessage 不容更改
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>

后端部分：

//服务器代码
//创建websocket 服务器
$ws = new swoole_websocket_server("0.0.0.0",9501);//这里的端口需要去服务器放行
// 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聊天室，仅可以用来测试，要把它运用到项目中还需要补充。

大博的博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PHP+swoole简易聊天室

在这里插入代码片@TOCswoole，websocket简易聊天室swoole，php扩展websocket，H5新特性，全双工通讯的协议。背景：一个小项目的群聊，在这之前使用过ajax轮循，但是无法达到效果，所以使用了websocket.不说了上代码。看前台代码：前台部分：<!DOCTYPE html><html><head lang="en...
复制链接

扫一扫