最开始想laravel+swoole打造一个简单的聊天室
然后开启server时候发现没必要，在哪写都一样
所以我另外在laravel外面写了个server的目录，用作简单调试
image.png
以下是代码块
swooleServer.php
<?php
class swooleServer
{
public $server;
public function __construct()
{
$this->server = new \Swoole\WebSocket\Server("0.0.0.0", 9501);
}
public function go()
{
// 客户端链接时候触发
$this->server->on('open', function (Swoole\WebSocket\Server $server, $request) {
echo "server: handshake success with fd{$request->fd}\n";
});
// 客户端发送消息的时候触发
$this->server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
// $server->push($frame->fd, "{$frame->data}");
// 获取到里面所有的链接id，然后逐个广播
foreach ($this->server->connections as $fd) {
// 需要先判断是否是正确的websocket连接，否则有可能会push失败
if ($this->server->isEstablished($fd)) {
// push到server 然后客户端接收
$this->server->push($fd, json_encode(['on'=>$frame->fd,'msg'=>$frame->data]));
}
}
});
// 客户端关闭链接的时候触发
$this->server->on('close', function ($ser, $fd) {
echo "client {$fd} closed\n";
});
// 运行server
$this->server->start();
}
}
$ser = new swooleServer();
$ser->go();
用户1的view。user/profile.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
用户1：
</div>
<div>
<div>
</div>
<div>
<div>展示内容</div>
<div class="show_conten"></div>
</div>
</div>
<div>
<input type="text" name="text_val" value="" class="val">
<button class="btn">提交</button>
</div>
</body>
</html>
<script type="text/javascript" src="{{URL::asset('js/jquery-1.8.3.min.js')}}"></script>
<script type="text/javascript">
var wsUrl = "ws://laravelim.net:9501";
var websocket = new WebSocket(wsUrl);
$(function () {
$('.btn').click(function () {
var val = $('.val').val();
if(val.length < 1) {
return false;
}
websocket.send(val);
$('.val').val('');
});
// 实例对象 onopen
websocket.onopen = function(evt) {
console.log('contected-success');
};
// onmessage
websocket.onmessage = function(evt) {
console.log('return_data',evt);
var data1 = evt.data;
var data = $.parseJSON(data1);
var html = '<p>用户'+ data.on +'：'+ data.msg +'</p>';
$('.show_conten').append(html);
};
// onclose
websocket.onclose = function(evt) {
console.log('关闭');
}
// onerror
websocket.onerror = function(evt) {
console.log('error',evt);
}
})
</script>
用户2的view，home/profile.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
用户2：
</div>
<div>
<div>
</div>
<div>
<div>展示内容</div>
<div class="show_conten"></div>
</div>
</div>
<div>
<input type="text" name="text_val" value="" class="val">
<button class="btn">提交</button>
</div>
</body>
</html>
<script type="text/javascript" src="{{URL::asset('js/jquery-1.8.3.min.js')}}"></script>
<script type="text/javascript">
var wsUrl = "ws://laravelim.net:9501";
var websocket = new WebSocket(wsUrl);
$(function () {
$('.btn').click(function () {
var val = $('.val').val();
if(val.length < 1) {
return false;
}
websocket.send(val);
$('.val').val('');
});
// 实例对象 onopen
websocket.onopen = function(evt) {
console.log('contected-success');
};
// onmessage
websocket.onmessage = function(evt) {
console.log('return_data',evt);
var data1 = evt.data;
var data = $.parseJSON(data1);
var html = '<p>用户'+ data.on +'：'+ data.msg +'</p>';
$('.show_conten').append(html);
};
// onclose
websocket.onclose = function(evt) {
console.log('关闭');
}
// onerror
websocket.onerror = function(evt) {
console.log('error',evt);
}
})
</script>
最终效果
image.png
