notice:
通过命令行执行php文件 如 php -q c:\path\server.php
通过本地web服务器访问 http://127.0.0.1/websocket/index.php即可
notice:
需要php5.3或以上的执行环境,和一个web服务器如apache
浏览器需支持html5 web socket
这里监听 socket端口 9505,如遇到端口被占用可能需要在这两个文件内修改端口或者杀死相应端口进程
页面手机上看起来比pc上好看!
1.客户端代码 html文件
1.client code:
<!DOCTYPE html>
<html>
<head>
<title>chatdemo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
<!--
html, body {
min-height: 100%; }
body {
margin: 0;
padding: 0;
width: 100%;
font-family: "Microsoft Yahei",sans-serif, Arial; }
.container {
text-align: center; }
.title {
font-size: 16px;
color: rgba(0, 0, 0, 0.3);
position: fixed;
line-height: 30px;
height: 30px;
left: 0px;
right: 0px;
background-color: white; }
.content {
background-color: #f1f1f1;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-top: 30px; }
.content .show-area {
text-align: left;
padding-top: 8px;
padding-bottom: 168px; }
.content .show-area .message {
width: 70%;
padding: 5px;
word-wrap: break-word;
word-break: normal; }
.content .write-area {
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
background-color: #f1f1f1;
z-index: 10;
width: 100%;
height: 160px;
border-top: 1px solid #d8d8d8; }
.content .write-area .send {
position: relative;
top: -28px;
height: 28px;
border-top-left-radius: 55px;
border-top-right-radius: 55px; }
.content .write-area #name{
position: relative;
top: -20px;
line-height: 28px;
font-size: 13px; }
-->
</style>
</head>
<body>
<div class="container">
<div class="title">简易聊天demo</div>
<div class="content">
<div class="show-area"></div>
<div class="write-area">
<div><button class="btn btn-default send" >发送</button></div>
<div><input name="name" ></div>
<div>
<textarea name="message" ></textarea>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function(){
var wsurl = 'ws://127.0.0.1:9505/websocket/server.php';
var websocket;
var i = 0;
if(window.WebSocket){
websocket = new WebSocket(wsurl);
//连接建立
websocket.onopen = function(evevt){
console.log("Connected to WebSocket server.");
$('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');
}
//收到消息
websocket.onmessage = function(event) {
var msg = JSON.parse(event.data); //解析收到的json消息数据
var type = msg.type; // 消息类型
var umsg = msg.message; //消息文本
var uname = msg.name; //发送人
i++;
if(type == 'usermsg'){
$('.show-area').append('<p class="bg-success message"><i class="glyphicon glyphicon-user"></i><a name="'+i+'"></a><span class="label label-primary">'+uname+' say: </span>'+umsg+'</p>');
}
if(type == 'system'){
$('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>'+umsg+'</p>');
}
$('#message').val('');
window.location.hash = '#'+i;
}
//发生错误
websocket.onerror = function(event){
i++;
console.log("Connected to WebSocket server error");
$('.show-area').append('<p class="bg-danger message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');
window.location.hash = '#'+i;
}
//连接关闭
websocket.onclose = function(event){
i++;
console.log('websocket Connection Closed. ');
$('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');
window.location.hash = '#'+i;
}
function send(){
var name = $('#name').val();
var message = $('#message').val();
if(!name){
alert('请输入用户名!');
return false;
}
if(!message){
alert('发送消息不能为空!');
return false;
}
var msg = {
message: message,
name: name
};
try{
websocket.send(JSON.stringify(msg));
} catch(ex) {
console.log(ex);
}
}
//按下enter键发送消息
$(window).keydown(function(event){
if(event.keyCode == 13){
console.log('user enter');
send();
}
});
//点发送按钮发送消息
$('.send').bind('click',function(){
send();
});
}
else{
alert('该浏览器不支持web socket');
}
});
</script>
</body>
</html>