微信小程序+服务器 利用Swoole的WebSocket实现简单的交互功能

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
        })
    },

         保存后 如果连接成功后就可以看到如下画面

         当我点击发送按钮后 就可以看到 如下

         这就表示，已经成功了！

在做所有操作之前一定要先完成这一步