既然这样，那我就把我写的无与伦比的websocket聊天室拿出来吧。
虽然只是一个渣的一比的DEMO，但是能聊...
基于 swoole 做的。 先贴图片再贴代码：
websocket聊天室
当然你得先装了 Swoole 扩展才可以，并且该PHP文件是在 CLI 模式下执行的。不要在浏览器执行。please
PHP代码：
<?php
/**
* 基于Swoole的聊天室系统
*/
$server = new Swoole\Websocket\Server("0.0.0.0", 9502);
$server->on('open', function (swoole_websocket_server $server, $frame) {
//每一次客户端连接 最大连接数将增加
$message = "欢迎 连接号{$frame->fd}：进入了聊天室";
echo $message."\n";
foreach ($server->connections as $key => $value) {
if($frame->fd != $value){
$server->push($value, $message);
}
}
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
$fd = $frame->fd;
$data = $frame->data;
$message = "[连接号{$fd}]:{$data}";
//向所有人广播
foreach ($server->connections as $key => $value) {
if($frame->fd != $value){
$server->push($value, $message);
}
}
});
$server->on('close', function (swoole_websocket_server $server, $fd) {
//关闭连接 连接减少
$message = "连接号{$fd}：退出了聊天室";
echo "client {$fd} closed\n";
foreach ($server->connections as $key => $value) {
if($fd != $value){
$server->push($value, $message);
}
}
});
$server->start();
在处理消息的时候一定要注意安全防护，假如你要存库或者干什么，不然很容易被注入之类的...
html代码：（javascript的websocket，bootstrap）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>聊天室-opqnext.com</title>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.toastmessage.css">
<script src="js/jquery.toastmessage.js"></script>
<style>
body {
width: 600px;
margin: 40px auto;
font-family: 'trebuchet MS', 'Lucida sans', Arial;
font-size: 14px;
color: #444;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/1.jpg" alt="First slide">
</div>
<div class="item">
<img src="../img/2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="../img/3.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<h2>聊天室（CHAT ROOM）</h2>
<br><br>
<br><br>
<div id="msg"></div>
<div class="form-group">
<input class="form-control" style="width: 50%;float: left" type="text" id="text">
<button type="button" class="btn btn-primary" data-loading-text="Loading..." value="" style="float: left;margin-left: 10px;" onclick="song()">发送数据</button>
</div>
<audio id="audio1" width="420" >
<source src="img/6571.wav" type="audio/wav" />
<source src="img/17.ogg" type="audio/ogg" />
</audio>
</body>
<script>
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
var msg = document.getElementById("msg");
var wsServer = 'ws://192.168.221.110:9502';
//调用websocket对象建立连接：
//参数：ws/wss(加密)：//ip:port （字符串）
var websocket = new WebSocket(wsServer);
//onopen监听连接打开
websocket.onopen = function (evt) {
msg.innerHTML = websocket.readyState;
};
function song(){
var text = document.getElementById('text').value;
document.getElementById('text').value = '';
var date = new Date().Format("MM-dd hh:mm:ss");
msg.innerHTML += '<p class="text-center"><span class="badge" style="background-color:#E0E0E0">'+date+'</span></p>';
msg.innerHTML += '<p class="text-right">[我]: '+ text+'</p>';
//向服务器发送数据
websocket.send(text);
}
//监听连接关闭
// websocket.onclose = function (evt) {
// console.log("Disconnected");
// };
//onmessage 监听服务器数据推送
websocket.onmessage = function (evt) {
$().toastmessage('showSuccessToast', "您有新消息啦！");
var audio = document.getElementById("audio1");
audio.play();
var date = new Date().Format("MM-dd hh:mm:ss");
msg.innerHTML += '<p class="text-center"><span class="badge" style="background-color:#E0E0E0">'+date+'</span></p>';
msg.innerHTML += '<p class="text-left">'+evt.data +'</p>';
};
//监听连接错误信息
// websocket.onerror = function (evt, e) {
// console.log('Error occured: ' + evt.data);
// };
$(function() {
$("#myCarousel").carousel('cycle');
// $().toastmessage('showSuccessToast', "您有新消息啦！");
// var audio = document.getElementById("audio1");
// audio.play();
});
</script>
</html>
你看我这个聊天室就神奇的很呐，几乎没做什么安全过滤，你输入什么html，javascript的代码之类的呢，都能执行，真是开心呐。
我也就是写个例子，来大概跑一下，swoole的websocket的聊天室是怎么聊天的。
有了这个聊天室，真是又能写篇博客了呀。
网友评论