恺撒（教主）
websocket_server.php
<?php
/**
* Created by PhpStorm.
* User: Mac
* Date: 2019-01-06
* Time: 13:04
*/
//1创建服务器
$server=new swoole_websocket_server("0.0.0.0",9504);
//3注册事件
//连接上
$server->on("open",function (){
echo '连接上了wjp';
});
//接受发送
$server->on("message",function ($server,$frame){
echo '收到消息wjp'.$frame->data,"\n";
foreach($server->connections as $fd){
$server->push($fd,$frame->data);
}
});
//断开连接
$server->on("close",function(){
echo '断开连接wjp';
});
//2启动服务器
$server->start();
add.html=>发送推送信息
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150012.js"></script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150025.js"></script>
<![endif]-->
</head>
<body>
<form class="form-horizontal">
<fieldset>
<div id="legend" class="">
<legend class="">添加推送消息</legend>
</div>
<div class="control-group">
<!-- Textarea -->
<label class="control-label">消息内容</label>
<div class="controls">
<div class="textarea">
<textarea type="" class="" rows="5" cols="100" id="content"> </textarea>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Button</label>
<!-- Button -->
<div class="controls">
<button class="btn btn-success" id="push">推送</button>
</div>
</div>
</fieldset>
</form>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150033.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150050.js"></script>
<script>
$(function () {
//连接swoole服务器
var websocket= new WebSocket("ws://47.94.227.248:9504");
// console.log(websocket);
//发送
websocket.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
websocket.send("khud发送数据www");
};
$("#push").on('click',function () {
websocket.send($("#content").val());
$('#content').val("");
alert('推送消息成功');
return false;
});
});
</script>
</body>
</html>
index.html? =>展示推送的消息
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150012.js"></script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150025.js"></script>
<![endif]-->
</head>
<body>
<ul class="list-group">
</ul>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150033.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="http://www.51sjk.com/Upload/Articles/1/0/257/257804_20210630002150050.js"></script>
<script>
$(function () {
//连接swoole服务器
var websocket= new WebSocket("ws://47.94.227.248:9504");
// console.log(websocket);
//发送
websocket.onmessage = function (evt)
{
var received_msg = evt.data;
console.log(received_msg);
$("<li class="list-group-item">"+received_msg+"</li>").appendTo('.list-group');
};
});
</script>
</body>
</html>
?
?
