我做的一个websocket的demo(php server)，websocketdemo_PHP教程
- WBOY原创
- 2016-07-12 08:58:571331浏览
我做的一个websocket的demo(php server)，websocketdemo
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文件
class="container">
<script><span>
$(function(){
<span>var wsurl = <span>'<span>ws://127.0.0.1:9505/websocket/server.php<span>'<span>;
<span>var<span> websocket;
<span>var i = <span>0<span>;
<span>if<span>(window.WebSocket){
websocket = <span>new<span> WebSocket(wsurl);
<span>//<span>连接建立
websocket.onopen =<span> function(evevt){
console.log(<span>"<span>Connected to WebSocket server.<span>"<span>);
$(<span>'<span>.show-area<span>').append(<span>'<span><p class="bg-info message"><i class="glyphicon glyphicon-info-sign">Connected to WebSocket server!<span>'<span>);
}
<span>//<span>收到消息
websocket.onmessage = function(<span>event<span>) {
<span>var msg = JSON.parse(<span>event.data); <span>//<span>解析收到的json消息数据
<span>var type = msg.type; <span>//<span> 消息类型
<span>var umsg = msg.message; <span>//<span>消息文本
<span>var uname = msg.name; <span>//<span>发送人
i++<span>;
<span>if(type == <span>'<span>usermsg<span>'<span>){
$(<span>'<span>.show-area<span>').append(<span>'<span><p class="bg-success message"><i class="glyphicon glyphicon-user"><a name="<span>'+i+<span>'<span>"><span class="label label-primary"><span>'+uname+<span>'<span> say: <span>'+umsg+<span>'<span><span>'<span>);
}
<span>if(type == <span>'<span>system<span>'<span>){
$(<span>'<span>.show-area<span>').append(<span>'<span><p class="bg-warning message"><a name="<span>'+i+<span>'<span>"><i class="glyphicon glyphicon-info-sign"><span>'+umsg+<span>'<span><span>'<span>);
}
$(<span>'<span>#message<span>').val(<span>''<span>);
window.location.hash = <span>'<span>#<span>'+<span>i;
}
<span>//<span>发生错误
websocket.onerror = function(<span>event<span>){
i++<span>;
console.log(<span>"<span>Connected to WebSocket server error<span>"<span>);
$(<span>'<span>.show-area<span>').append(<span>'<span><p class="bg-danger message"><a name="<span>'+i+<span>'<span>"><i class="glyphicon glyphicon-info-sign">Connect to WebSocket server error.<span>'<span>);
window.location.hash = <span>'<span>#<span>'+<span>i;
}
<span>//<span>连接关闭
websocket.onclose = function(<span>event<span>){
i++<span>;
console.log(<span>'<span>websocket Connection Closed. <span>'<span>);
$(<span>'<span>.show-area<span>').append(<span>'<span><p class="bg-warning message"><a name="<span>'+i+<span>'<span>"><i class="glyphicon glyphicon-info-sign">websocket Connection Closed.<span>'<span>);
window.location.hash = <span>'<span>#<span>'+<span>i;
}
function send(){
<span>var name = $(<span>'<span>#name<span>'<span>).val();
<span>var message = $(<span>'<span>#message<span>'<span>).val();
<span>if(!<span>name){
alert(<span>'<span>请输入用户名!<span>'<span>);
<span>return <span>false<span>;
}
<span>if(!<span>message){
alert(<span>'<span>发送消息不能为空!<span>'<span>);
<span>return <span>false<span>;
}
<span>var msg =<span> {
message: message,
name: name
};
<span>try<span>{
websocket.send(JSON.stringify(msg));
} <span>catch<span>(ex) {
console.log(ex);
}
}
<span>//<span>按下enter键发送消息
$(window).keydown(function(<span>event<span>){
<span>if(<span>event.keyCode == <span>13<span>){
console.log(<span>'<span>user enter<span>'<span>);
send();
}
});
<span>//<span>点发送按钮发送消息
$(<span>'<span>.send<span>').bind(<span>'<span>click<span>'<span>,function(){
send();
});
}
<span>else<span>{
alert(<span>'<span>该浏览器不支持web socket<span>'<span>);
}
});
</script>
View Code
class="title">简易聊天demo
class="content">
class="show-area">
class="write-area">
"name" id="name" type="text" placeholder="input your name">
2.socket服务器端代码 php文件
以后有空再整份java版本的
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn