步骤一：确保在服务器上已经安装swoole扩展
步骤二：服务端代码sw_socket.php
<?php
$server = new swoole_websocket_server("0.0.0.0", 8909);
$server->on('open', function ($server, $request) {
echo "connection open: {$request->fd}\n";
});
$server->on('message', function ($server, $frame) {
echo "received message: ".json_encode($frame, JSON_UNESCAPED_UNICODE)."\n";
foreach($server->connections as $key => $fd) {
$user_message = $frame->data;
$server->push($fd, $user_message);
}
});
$server->on('close', function ($ser, $fd) {
echo "connection close: {$fd}\n";
});
$server->start();
步骤四：服务器开启8909端口
步骤五：浏览器直接访问=>(域名:8909) 测试是否成功
能这样显示说明是ok的：
image.png
步骤六：写前端代码，test.html,直接在浏览器上访问
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin:0px;
padding:0px;
}
.wrap{
margin-top: 20px;
margin-left:400px;
}
.msg-wrap{
border:1px solid;width: 600px;min-height: 100px;
}
#msgArea {
width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;overflow-y: scroll
}
.send-wrap{
border:1px solid;width: 600px;height: 200px;
}
.send-wrap2{
width:100%;height: 100%;
}
#userMsg{
width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;
}
.btn-wrap{
border:1px solid;width: 600px;height: 27px;
}
.btn-wrap button{
float: right;
padding: 5px;
background: #087;
border: 0px;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap" style="">
<div class="msg-wrap">
<div id="msgArea" ></div>
</div>
<div class="send-wrap">
<div class="send-wrap2">
<textarea id="userMsg"></textarea>
</div>
</div>
<div class="btn-wrap">
<button style="float: right;" onclick="sendMsg()">发送</button>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var ws;
$(function(){
link();
})
function link () {
ws = new WebSocket("ws://您的域名:8909");//连接服务器
ws.onopen = function(event){
console.log(event);
console.log('连接了');
};
ws.onmessage = function (event) {
var msg = "<p>"+event.data+"</p>";
console.log(event.data);
$("#msgArea").append(msg);
}
ws.onclose = function(event){console.log("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};
ws.onerror = function(event){console.log("WebSocket异常！");};
}
function sendMsg(){
var msg = $("#userMsg").val();
$("#userMsg").val('');
ws.send(msg);
}
</script>
步骤七：效果如下
image.png
网友评论