实现效果如下:
第一步:触发open事件
第二步: 触发message事件
第三步:关闭客户端与服务端的链接
代码如下
ws.php
<?php
$ws = new swoole_websocket_server('127.0.0.1', 9501);
$ws->on('open', function ($ws, $request) {
$ws->push($request->fd, "这是打开时候推送的消息" . PHP_EOL);
});
$ws->on('message', function ($ws, $request) {
echo "收到了ws.html的消息:" . $request->data;
$ws->push($request->fd, "我是来自点击按钮触发的消息" . PHP_EOL);
});
$ws->on('close', function () {
echo PHP_EOL . "关闭链接" . PHP_EOL;
});
$ws->start();
ws.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>WebSocket协议的客户端程序</h3>
<button id="btConnect">连接到WS服务器</button>
<button id="btSendAndReceive">向WS服务器发消息并接收消息</button>
<button id="btClose">断开与WS服务器的连接</button>
<div id="val"></div>
<script>
var wsClient = null; //WS客户端对象
btConnect.onclick = function(){
//连接到WS服务器,注意:协议名不是http!
wsClient = new WebSocket('ws://127.0.0.1:9501');
wsClient.onopen = function(){
console.log('WS客户端已经成功连接到服务器上')
}
}
btSendAndReceive.onclick = function(){
//向WS服务器发送一个消息
wsClient.send('你好服务器我是前端');
//接收WS服务器返回的消息
wsClient.onmessage = function(e){
console.log('WS客户端接收到一个服务器的消息:'+ e.data);
val.innerHTML=e.data;
}
}
btClose.onclick = function(){
//断开到WS服务器的连接
wsClient.close(); //向服务器发消息,主动断开连接
wsClient.onclose = function(){
//经过客户端和服务器的四次挥手后,二者的连接断开了
console.log('到服务器的连接已经断开')
}
}
</script>
</body>
</html>