Swoole-WebSocket-Chat 聊天室前后端demo
这几天花了些时间在研究linux和swoole，后来发现了用Cygwin来代替unix。
技术点就是基于swoole的WebSocket 实现聊天室功能,
参考了部分博主的教程，我就直接上前后端的代码
<?php
//创建websocket服务器对象，监听0.0.0.0:9502端口
$ws = new swoole_websocket_server("0.0.0.0", 9502);
//监听WebSocket连接打开事件
$ws->on("open", function ($ws, $request) {
$msg["user"] = "系统消息";
$msg["content"] = "欢迎用户 ".$request->fd." 来到聊天室
";
sendAllClient($ws, $msg);
});
//监听WebSocket消息事件
$ws->on("message", function ($ws, $frame) {
$msg["user"] = "用户".$frame->fd;
$msg["content"] = "{$frame->data}
";
sendAllClient($ws, $msg, $frame);
});
//监听WebSocket连接关闭事件
$ws->on("close", function ($ws, $fd) {
//删除已断开的客户端
// unset($ws->user_c[$fd-1]);
$msg["user"] = "系统消息";
$msg["content"] = "用户 {$fd} 退出了聊天室
";
sendAllClient($ws, $msg);
});
//发送消息到所有在线的客户端
function sendAllClient($ws, $msg, $frame=null){
var_dump($ws->connections);
$msg = implode(",", $msg);
foreach($ws->connections as $fd){
$ws->push($fd, $msg);
//如果是某个客户端，自己发的则加上isnew属性，否则不加
// if($frame->fd == $fd){
// $ws->push($frame->fd, $frame->data.","isnew":""");
// }else{
// $ws->push($fd, $msg);
// }
}
}
$ws->start();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Swoole-WebSocket-Chat</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="chatbox">
<div class="chat_top fn-clear">
<!-- <div class="logo"><img src="images/logo.png" width="190" height="60" alt=""/></div> -->
<div class="uinfo fn-clear">
<!-- <div class="uface"><img src="images/hetu.jpg" width="40" height="40" alt=""/></div> -->
<!-- <div class="uname">
河图<i class="fontico down"></i>
<ul class="managerbox">
<li><a href="#"><i class="fontico lock"></i>修改密码</a></li>
<li><a href="#"><i class="fontico logout"></i>退出登录</a></li>
</ul>
</div> -->
</div>
</div>
<div class="chat_message fn-clear">
<div class="chat_left">
<!-- 消息窗口 -->
<div class="message_box" id="message_box">
<!-- <div class="msg_item fn-clear">
<div class="uface"><img src="images/53f44283a4347.jpg" width="40" height="40" alt=""/></div>
<div class="item_right">
<div class="msg">mao</div>
<div class="name_time">fn-clear</div>
</div>
</div>
<div class="msg_item fn-clear">
<div class="uface"><img src="images/hetu.jpg" width="40" height="40" alt=""/></div>
<div class="item_right">
<div class="msg own"></div>
<div class="name_time">河图 · 30秒前</div>
</div>
</div> -->
</div>
<!-- 消息编辑器 -->
<div class="write_box">
<textarea id="message" name="message" class="write_area" placeholder="说点啥吧..."></textarea>
<input type="hidden" name="fromname" id="fromname" value="河图" />
<input type="hidden" name="to_uid" id="to_uid" value="0">
<div class="facebox fn-clear">
<div class="expression"></div>
<div class="chat_type" id="chat_type">群聊</div>
<button name="" class="sub_but">提 交</button>
</div>
</div>
</div>
<div class="chat_right">
<!-- <ul class="user_list" title="双击用户私聊">
<li class="fn-clear selected"><em>所有用户</em></li>
<li class="fn-clear" data-id="1"><span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span><em>河图</em><small class="online" title="在线"></small></li>
<li class="fn-clear" data-id="2"><span><img src="images/53f44283a4347.jpg" width="30" height="30" alt=""/></span><em>猫猫</em><small class="online" title="在线"></small></li>
<li class="fn-clear" data-id="3"><span><img src="images/53f442834079a.jpg" width="30" height="30" alt=""/></span><em>白猫</em><small class="offline" title="离线"></small></li>
</ul> -->
</div>
</div>
</div>
<script type="text/javascript">
//swoole webSocket
var exampleSocket = new WebSocket("ws://192.168.5.66:9502");
exampleSocket.onopen = function (event) {
// var fromname = $("#fromname").val();
// exampleSocket.send("欢迎 "+fromname+" 来到聊天室！");
};
exampleSocket.onmessage = function (event) {
var eventData = event.data;
// if (eventData == "") {
// showMessage(eventData);
// }
var arr = eventData.split(",")
var msg = [];
msg["user"] = arr[0];
msg["content"] = arr[1];
showMessage(msg);
console.log(msg["user"], msg["content"]);
}
function sendMsg(){
exampleSocket.send(document.getElementById("message").value);
}
//html content
$(document).ready(function(e) {
$("#message_box").scrollTop($("#message_box")[0].scrollHeight + 20);
$(".uname").hover(
function(){
$(".managerbox").stop(true, true).slideDown(100);
},
function(){
$(".managerbox").stop(true, true).slideUp(100);
}
);
var fromname = $("#fromname").val();
var to_uid = 0; // 默认为0,表示发送给所有用户
var to_uname = "";
$(".user_list > li").dblclick(function(){
to_uname = $(this).find("em").text();
to_uid = $(this).attr("data-id");
if(to_uname == fromname){
alert("您不能和自己聊天!");
return false;
}
if(to_uname == "所有用户"){
$("#toname").val("");
$("#chat_type").text("群聊");
}else{
$("#toname").val(to_uid);
$("#chat_type").text("您正和 " + to_uname + " 聊天");
}
$(this).addClass("selected").siblings().removeClass("selected");
$("#message").focus().attr("placeholder", "您对"+to_uname+"说：");
});
$(".sub_but").click(function(event){
// sendMessage(event, fromname, to_uid, to_uname);
console.log($("#message").val());
var message = $("#message").val();
exampleSocket.send(message);
});
/*按下按钮或键盘按键*/
$("#message").keydown(function(event){
var e = window.event || event;
var k = e.keyCode || e.which || e.charCode;
//按下ctrl+enter发送消息
// if((event.ctrlKey && (k == 13 || k == 10) )){
// sendMessage(event, fromname, to_uid, to_uname);
// }
});
});
function showMessage1(event, from_name, to_uid, to_uname){
var msg = $("#message").val();
if(to_uname != ""){
msg = "您对 " + to_uname + " 说： " + msg;
}
var htmlData = "<div class="msg_item fn-clear">"
// + " <div class="uface"><img src="images/hetu.jpg" width="40" height="40" alt=""/></div>"
+ " <div class="item_right">"
+ " <div class="msg own">" + msg + "</div>"
+ " <div class="name_time">" + from_name + " · "+ dateObj.toLocaleDateString() +"</div>"
+ " </div>"
+ "</div>";
$("#message_box").append(htmlData);
$("#message_box").scrollTop($("#message_box")[0].scrollHeight + 20);
$("#message").val("");
}
function showMessage(msg, from_name="河图", to_uname="所有用户"){
var htmlData = "<div class="msg_item fn-clear">"
+ " <div class="uface"><img src="images/hetu.jpg" width="40" height="40" alt=""/></div>"
+ " <div class="item_right">"
+ " <div class="msg own">" + msg["content"] + "</div>"
+ " <div class="name_time">" + msg["user"] + " · "+ getTime() +"</div>"
+ " </div>"
+ "</div>";
$("#message_box").append(htmlData);
$("#message_box").scrollTop($("#message_box")[0].scrollHeight + 20);
$("#message").val("");
}
function getTime() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var currentTime = this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
return currentTime;
}
</script>
</body>
</html>
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇：没有了
- 下一篇：没有了
