swoole实验版聊天室
“swoole实验版聊天室”是依据一堂swoole培训课内容改编的，结合了bootstrap前端框架、redis数据库、jquery框架等实现基本功能，只是体现了swoole的应用，并不是为了专门写个聊天室。
本程序开发环境：
1.ubuntu16.04.1
2.PHP Version 7.2.21
3.swoole Version 4.4.3
4.Redis Version 4.0.2
安装步骤（略）。
效果如下：
代码如下：
index.php文件
<!DOCTYPE html>
<html>
<head>
<title>swoole实验版聊天室</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <style>
body{background-color: #191970;}
@media screen and (min-width: 992px) {
div{display: none}
body {background: #fff}
body:before {
content: "不支持此设备浏览！";
position: absolute;
left: 10px;
top: 30px
}
} @media screen and (min-width: 768px) and (max-width: 991px) {
div{display: none}
body {background: #fff}
body:before {
content: "不支持此设备浏览！";
position: absolute;
left: 10px;
top: 30px
}
} @media screen and (min-width: 576px) and (max-width: 767px) {
#result{
width: 100%;
height: 300px;
overflow-y: scroll;
margin: 0px;
padding: 5px;
}
#is-open{
display: inline-block;
border: solid 1px #dcdcdc;
padding: 6px;
margin: 6px 0px;
border-radius: 8px;
color: #fff;
}
.ms {
display:inline-block;
width:80%
}
.msl {
display:inline-block;
width:40%;
background-color: #66cdaa
}
.btn {
display:inline-block;
float: right;
width:20%
}
.mess{
color: #00fa9a;
text-align: right
}
.mess-1{
display: inline-block;
word-wrap:break-word;
word-break:break-all;
color: #2f4f4f;
background-color:#f4a460;
padding: 8px;
border-radius: 8px;
text-align: left
}
.mess-1-1, .mess-2-2 {
display: inline-block;
color: #000;
font-weight: bold;
background-color: #add8e6;
}
.mess-1-1{
padding: 8px;
border-radius: 8px
}
.mess-2-2{
padding: 8px;
border-radius: 8px
}
.mess-2{
display: inline-block;
word-wrap:break-word;
word-break:break-all;
color: #696969;
background-color:#fff;
padding: 8px;
border-radius: 8px
}
.tot{
display: inline-block;
width: 40%;
word-wrap:break-word;
word-break:break-all;
color: #fff;
float: right;
margin-top: 3px;
}
.bottom-box{
position: fixed;
left: 0px;
bottom: 0px;
width:100%;
background-color: #191970;
padding-top: 10px
}
} @media screen and (min-width: 300px) and (max-width: 575px) {
#result{
width: 100%;
height: 300px;
overflow-y: scroll;
margin: 0px;
padding: 5px;
}
#is-open{
display: inline-block;
border: solid 1px #dcdcdc;
padding: 6px;
margin: 6px 0px;
border-radius: 8px;
color: #fff;
}
.ms {
display:inline-block;
width:80%
}
.msl {
display:inline-block;
width:40%;
background-color: #66cdaa
}
.btn {
display:inline-block;
float: right;
width:20%
}
.mess{
color: #00fa9a;
text-align: right
}
.mess-1{
display: inline-block;
word-wrap:break-word;
word-break:break-all;
color: #2f4f4f;
background-color:#f4a460;
padding: 8px;
border-radius: 8px;
text-align: left
}
.mess-1-1, .mess-2-2 {
display: inline-block;
color: #000;
font-weight: bold;
background-color: #add8e6;
}
.mess-1-1{
padding: 8px;
border-radius: 8px
}
.mess-2-2{
padding: 8px;
border-radius: 8px
}
.mess-2{
display: inline-block;
word-wrap:break-word;
word-break:break-all;
color: #696969;
background-color:#fff;
padding: 8px;
border-radius: 8px
}
.tot{
display: inline-block;
width: 40%;
word-wrap:break-word;
word-break:break-all;
color: #fff;
float: right;
margin-top: 3px;
}
.bottom-box{
position: fixed;
left: 0px;
bottom: 0px;
width:100%;
background-color: #191970;
padding-top: 10px
}
}
</style> </head>
<body>
<div class="container">
<span id="is-open">服务器正在连接......</span>
<span class="tot">当前共有<span id="total">0</span>个窗口在连接！</span>
<p id="result"></p> <form>
<div class = "bottom-box">
<p><span style="color: #fff">昵称：</span><input type="text" id="username" class="form-control msl"/></p>
<p>
<input id="message" class="form-control ms">
<button id="btn" type="button" class="btn btn-primary">发送</button>
</p>
</div>
</form> </div> <script>
$(document).ready(function(){ var timeOut;
var arrResult = []; // 设置cookie函数
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
} // 取出cookie数据函数
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
} /* 刷新页面时从取出数据初始化页面 */ // 初始化插入昵称
var usrName = (getCookie("userName") != null)?getCookie("userName"):"";
$("#username").val(usrName); setTimeout(function(){
// 初始化滚动消息到最新
$("#result").scrollTop(result.scrollHeight);
},500); // 刷新页面时从redis数据库取出数据初始化页面
$.post("./ajax.php",{},function(ajaxData){
var m = JSON.parse(ajaxData);
for(key in m){
arrResult.push(m[key]);
}
$("#result").html(arrResult.join(''));
}); /* 初始化数据结束 */ /* websocket通信 */
var ws = new WebSocket("ws://47.94.224.241:9503"); ws.onopen=function(){
$("#is-open").html('服务器连接成功......');
clearInterval(timeOut);
} ws.onmessage=function(res){
var data=JSON.parse(res.data);
if(data.userId){
window.userId = data.userId;
} if(data.total){
$("#total").html(data.total);
return false;
} if( data.cookieUsrName == getCookie("userName") ) {
arrResult.push('<p class="mess"><span class="mess-1">' + data.message + '</span><span class="mess-1-1">我</span></p>');
}else{
arrResult.push('<p><span class="mess-2-2">' + data.username + '</span><span class="mess-2">' + data.message + '</span></p>');
} // while()里的49要与ajax.php里的lpush方法里的参数49要统一
while ( arrResult.length > 49) {
arrResult.shift();
} // 显示在界面上
var val = arrResult.join("");
$("#result").html(val); $("#result").scrollTop(result.scrollHeight);
} ws.onclose=function(){
$("#is-open").html('');
$("#is-open").html('服务器已断开......'); // 断开连接刷新页面
timeOut = setInterval(function(){
location.replace(location.href);
}, 1000);
} btn.onclick=function(){
if($("#username").val() == '' || $("#message").val() == '') { // 打开模态框
$('#myModal').modal('show');
}else{ /*
* 组装数据，数据是在js里组装的，swoole服务器只是转发了一下数据并存入redis数据库
*
* 判断“我”的方法：
* 1. 一种是判断fromuserid，可以判断到具体窗口，一个浏览器打开3个窗口就是3个不同的“我”；
* 2. 另一种是判断cookie或session里存储的用户名，即cookieUsrName键，一个浏览器认
* 为是一个用户，这里是用昵称代替了。
*/
var data={ fromuserid: window.userId, username: username.value, message: message.value, cookieUsrName: getCookie("userName") } ; //对象转JSON字符串发送到服务器
ws.send( JSON.stringify(data) );
message.value='';
}
} username.onkeyup = function() {
//昵称存入cookie
setCookie("userName", $("#username").val(), 7);
}
});
</script> <!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content"> <!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">
<i class="fa fa-exclamation-circle fa-lg" style="color: red"></i>
错误提示：
</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div> <!-- 模态框主体 -->
<div class="modal-body">
“昵称”和“消息”内容都不允许为空，请重新输入！
</div> <!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div> </div>
</div>
</div> </body>
</html>
swooleServer.php
<?php
$ws = new swoole_websocket_server("0.0.0.0", 9503, SWOOLE_PROCESS); $ws->set(array(
'reactor_num' => 2, //reactor thread num
'worker_num' => 4, //worker process num
'backlog' => 128, //listen backlog
'max_conn' => 10000,
'max_request' => 50,
'dispatch_mode' => 1,
'daemonize' => 1
)); $ws->on('open', function ($ws, $request) { $tot = count($ws->connections);
$ws->push($request->fd, json_encode(['userId' => $request->fd, 'total' => $tot])); }); $ws->on('message', function ($ws, $frame) {
// 每个用户发送的消息向所有用户转发
foreach($ws->connections as $value) {
$ws->push($value, $frame->data);
} // 向redis数据库写入数据，数据类型“列表”
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$redis->lpush("messages", $frame->data); // 超过100条数据开始删除旧数据
while($redis->llen("messages") > 100) {
$redis->rpop("messages");
} }); $ws->on('close', function ($ws, $fd) { $i = 0;
foreach($ws->connections as $v) {
if($v == $fd) {
unset($ws->connections[$i]);
}
$i++;
} }); $ws->start();
?>
ajax.php
<?php
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$arrList = $redis->lrange("messages", 0, 20);
$arrValue = [];
while(count($arrList) > 0){
$v = array_pop($arrList);
$arrVal = json_decode($v, true);
if($arrVal['cookieUsrName'] == $_COOKIE['userName']) {
array_push($arrValue, '<p class="mess"><span class="mess-1">' . $arrVal['message'] . '</span><span class="mess-1-1">我</span></p>');
}else{
array_push($arrValue, '<p><span class="mess-2-2">' . $arrVal['username'] . '</span><span class="mess-2">' . $arrVal['message'] . '</span></p>');
}
} echo json_encode($arrValue);
?>
可以通过下面的页面查看redis数据库里的内容，不用去服务器端查看效果。
showRedis.php
<?php
//连接本地的 Redis 服务
$redis = new Redis();
$redis->connect('127.0.0.1', 6379); // 获取存储的数据并输出
$arList = $redis->lrange("messages", 0 ,100);
echo '当前显示内容->' . json_decode($arList[0], true)["username"] . "：“" . json_decode($arList[0], true)["message"] . "”";
echo "<pre>";
print_r($arList);
echo "</pre>";?>
swoole实验版聊天室的更多相关文章
- Swoole实现h5版聊天室笔记
声明:该聊天室目前只有一对多,一对一的聊天功能,另外,因为没有使用到mysql,所以还存在比较多的缺陷地方,但知道原理就差不多了,这里主要分享下swoole简易的聊天室制作思路. 开发环境:cento ...
- angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例
一.项目介绍 运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室 ...
- 如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
- 基于WebSocket实现网页版聊天室
WebSocket ,HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其使用简单,应用场景也广泛,不同开发语言都用种类繁多的实现,仅Java体系中,Tomcat,Jetty,Sp ...
- golang简易版聊天室
功能需求: 创建一个聊天室,实现群聊和单聊的功能,直接输入为群聊,@某人后输入为单聊 效果图: 群聊: 单聊: 服务端: package main import ( "fmt" ...
- WinForm版聊天室复习Socket通信
聊天室:服务器端-------------客户端 最终演示展示图: 一. 服务器端 对服务端为了让主窗体后台不处理具体业务逻辑,因此对服务端进行了封装,专门用来处理某个客户端通信的过程. 而由于通信管 ...
- 利用html 5 websocket做个山寨版web聊天室(手写C#服务器)
在之前的博客中提到过看到html5 的websocket后很感兴趣,终于可以摆脱长轮询(websocket之前的实现方式可以看看Developer Works上的一篇文章,有简单提到,同时也说了web ...
- MyChatRoom——C#自制聊天室
一个用C#编写的基于Socket的Windows版聊天室,包括服务端和客户端.当服务端启动服务后,客户端可以连接到服务端,给服务端发送数据,服务端可以接收数据:服务端可以给客户端发送数据,客户端接收: ...
- 简单的聊天室代码php+swoole
php swoole+websocket 客户端代码 <!DOCTYPE html> <html> <head> <title></title&g ...
随机推荐
- react native断点调试--Debug React-Native with VSCode
.babelrc { "presets": [ "react-native" ], "sourceMaps": true } Many Ja ...
- MySQL备份python代码
import os, time, pymysql, shutil from apscheduler.schedulers.blocking import BlockingScheduler # 定时任 ...
- linux学习17 运维核心技能-Linux系统下用户权限管理
一.权限管理 1.ls -l rwxrwxrwx 左三位:定义user(owner)的权限 中三位:定义group的权限 右三位:定义other的权限 1.进程安全上下文 a.进程对文件的访问权限应用 ...
- yugabyte 做为hasura graphql-engine的pg数据引擎
今天看了下yugabyte 的更新 ,ysql 基本可以生产可用,刚好测试了下与hasura graphql-engine的集成,发现很不错,可以直接运行 环境准备 docker-compose ve ...
- s3-sftp-proxy goreleaser rpm &&deb 包制作
上次写过简单的s3-sftp-proxy基于容器构建以及使用goreleaser构建跨平台二进制文件的,下边演示下关于 rpm&&deb 包的制作,我们只需要简单的配置就可以生成方便安 ...
- 【JZOJ6246】【20190627】B
题目 求逆续对个数为\(k\)的\(n\)阶排列个数\(mod \ 1e9+7\) $1 \le n , k \le 10^5 $ 题解 $f_{i,j} = \sum_{k=0}^{i-1} f ...
- SQL进阶-索引设置&sql优化
一.索引设置 1.索引的设置原则 经常出现在WHERE条件.关联条件中的字段作为索引字段: 在满足查询需求的前提下,应尽可能少的创建索引:(对于一个组合索引,可以满足以组合索引左边的一部分字段的查询需 ...
- 第02组 Alpha冲刺（3/4）
队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:写博客,复习C语言 GitHub签入记录 接下来的计划:构思游戏实现 还剩下哪些任务:敲代码 燃尽图 遇到的困难:Alpha冲刺时间 ...
- web前端开发高级
前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js 基础语法 实例对象生命周期模板语法计算属性Methods 方法 渲染 列表渲染条件渲染 ...
- (持续更新) C# 面试技术点、常见SQL技术点 和 解决高并发的相关技术
这篇博客 持续更新. 方便小伙伴们学习与面试前的复习