1.服务端
2.文件内写入(切记:监听的端口号,一定要提前放行 我的是9501)
<?php//创建WebSocket Server对象,监听0.0.0.0:9501端口$ws = new Swoole\WebSocket\Server('0.0.0.0', 9501);//监听WebSocket连接打开事件$ws->on('Open', function ($ws, $request) {$ws->push($request->fd, "hello, welcome\n");});//监听WebSocket消息事件$ws->on('Message', function ($ws, $frame) {echo "Message: {$frame->data}\n";//“$frame->data”就是客户端发送的内容if ($frame->data=='人工客服') {//“$frame->fd”是客户端的ID,ID是服务端自动生成的,后方双引号内的内容为服务端返回给客户端的内容$ws->push($frame->fd, "客服下班了");}else{$ws->push($frame->fd, "哈哈哈");}});//监听WebSocket连接关闭事件$ws->on('Close', function ($ws, $fd) {echo "client-{$fd} is closed\n";});$ws->start();?>
3.启动这个 php 文件
到文件的目录下运行php server.php
这时他可能会报这个错误
这是9501端口被占用了 只需要用netstat -tunlp 这个命令查看一下
我们使用kill 1417546 杀死这个进程,之后在执行php server.php 就好了
4.接下来,奉上小程序中的代码
首先在 onLoad 中写
onLoad: function (options) {//连接后台服务器wx.connectSocket({url: 'ws://yanlongfei.icu:9501'})//连接成功后的回调wx.onSocketOpen(function (res) {console.log('连接成功');})//监听 WebSocket 接受到服务器的消息事件wx.onSocketMessage(function (res) {console.log(res)})},
然后可以在页面写一个发送的按钮 用点击事件调一个发送的方法
<button bindtap="send">发送</button>
接下来就是这个方法的内容
你可以在前端写一个表单,向服务端发送活的内容,我这只为测试,所以将内容写死了
//页面按钮的点击事件send() {let msg = '人工客服';//向服务器发送内容wx.sendSocketMessage({data:msg})},
保存后 如果连接成功后就可以看到如下画面
当我点击发送按钮后 就可以看到 如下
这就表示,已经成功了!
在做所有操作之前一定要先完成这一步