评论平台

最新推荐文章于 2023-03-18 16:21:04 发布

原创最新推荐文章于 2023-03-18 16:21:04 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用 Workerman 框架实现 WebSocket 服务端，并结合 ThinkPHP 框架和微信小程序进行交互示例。服务端实现了客户端连接验证及消息广播功能。

接上个整合Workerman后

在接口处可以这么写

<?php
namespace Api\Controller;
use Think\Controller;
use Workerman\Worker;
use Workerman\Lib\Timer;
class WorkerManController extends CommonController{

public function index(){
if(!IS_CLI){
die("无法直接访问，请通过命令行启动");
}
$worker = new \Workerman\Worker('websocket://127.0.0.1:2348');
// 当收到客户端发来的数据后返回hello $data给客户端
$worker->onConnect = function($connection){
Timer::add(500, function() use ($connection){
if(!isset($connection->name)){
$connection ->close('auth timeout and close');
}
}, null, false);

};
$worker->onMessage = function($connection, $data) use ($worker)
{

//json_decode后面不传TRUE会报错！！！！
$ndata = json_decode($data,true);
if(!isset($connection->name)){
$connection->name = $ndata['name'];
foreach ($worker->connections as $connection) {
$connection->send($ndata['name'].'login');
}
}else{
$this ->broadcast($worker,$connection->name.':'.$ndata['msg']);
}

};
// 运行worker
Worker::runAll();

}

public function broadcast($worker,$msg){

foreach ($worker->connections as $connection) {
// $connection->send($ndata['msg']);
$connection->send($msg);
}
}
}

?>

----------------------------------------分割线-----------------------------------------------------------------------

小程序JS部分

//index.js
//获取应用实例
var app = getApp()
var socketOpen = false
var content = ['欢迎你']
Page({
data: {
motto: 'Hello World',
text : content,
msg: ''
},
onLoad: function () {
// 创建websocket连接
wx.connectSocket({
url: 'ws://127.0.0.1:2348',
})
//打开websocket
wx.onSocketOpen(function(res) {
console.log('WebSocket连接已打开！')
socketOpen = true
})
},
sendmess: function () {
if (socketOpen) {
var data = '{"name": "gd","msg":"'+this.data.msg+'"}';
wx.sendSocketMessage({
data:data
})
var that=this;
wx.onSocketMessage(function(res) {
content.push(res.data)
console.log(res.data)
that.setData({
text: content.join('\n')
})
})

}
},
aa:function(e){
this.setData({
msg: e.detail.value
})
}



})

--------------------------------------小程序页面部分-------------------------------------------------------------

<view class="container">

<view class="content">
<text>{{text}}</text>
</view>
<view>
<view>
<input type="text" class="in" bindinput="aa"/>
</view>
<view>
<button type="send" bindtap="sendmess"> 发送信息 </button>
</view>
</view>

</view>

-------------------------小程序样式------------------------------

/**index.wxss**/
.content{
border: 1px solid black;
width: 700rpx;
height: 800rpx;
}

.send{
float: right;
margin-top: 20px;
margin-left: 50px;
}

.in{
border: solid 1px black;
margin: 10rpx;

}

.mess{
width:700rpx;
margin: 20rpx;

}