与大家分享一下这个用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>
swoole-websocket 及时通讯demo
<!--发送信息-->
<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();
运行程序: 浏览器输入页面所在地址即可进行测试:
你是不是多少有了解一点,但是你却对这个不精啊!免费分享tp,laravel,swoole,swoft微服务、SQL性能优化,分布式、高并发等教程,各种大牛都是1-78年PHP开发者,每天还有11年的架构师做课程讲解,助你进阶中高级PHP程序员,增值涨薪!