PHP+Swoole 搭建 Websocket 聊天室

1.这里用的线上服务器宝塔

先建立一 .php文件

 2.到swoole官网Swoole4 文档

3.前端测试连接

先打开进入文件所在的目录

 

 wx.connectSocket({
      url: 'ws://域名:9502',  在微信公众平台进行绑定
    })

 小程序

 4.前端渲染

<view wx:for="{{list}}" wx:key="index">
  <view class="{{item.class}}">{{item.message}}</view>
  <!-- <view>you</view> -->
</view>
<view>
  <view><input type="text" bindinput="getMsg" placeholder="请输入内容"/></view>
  <button bindtap="sendMsg">发送</button>
</view>

5.js页面

// pages/swo/swo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[]
  },
  getMsg(c){
    this.setData({
      message:c.detail.value
    })
  },
  snedMsg(c){
    let send = {
      to:'a',
      my:'b',
      type:'send',
      data:this.data.message
    }
    this.send(JSON.stringify(send));
    this.webSockertXin(6000,false)
    let list = this.data.list
    list.push({
      class:'my',
      message:this.data.message
    })
    this.setData({
      list:list
    })
  },
  send(data){
    wx.sendSocketMessage({
      data: data,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.connectSocket({
      url: 'ws://swoole.ckl.ink:9502',
    })
    this.webSockertXin()
    wx.onSocketOpen((result) => {
      let send = {
        to:'a',
        my:'b',
        type:'open'
      }
      this.send(JSON.stringify(send))
    })
    wx.onSocketMessage((result) => {
      console.log(result)
      let message = JSON.parse(result.data)
      console.log(message.message)
      let list = this.data.list
      list.push({
        class:'you',
        message:message.message
      })
      this.setData({
        list:list
      })
    })
  },
  webSockertXin(time = 6000,state = true){
    let timer
    if(state == true){
      let timer = setInterval(function(){
        console.log('当前心跳已连接');
        wx.sendSocketMessage({
          data: JSON.stringify({
            type:'active'
          }),
          fail(res){
            wx.closeSocket()
            wx.showToast({
              title: '当前聊天已断开',
              icon:'none'
            })
            clearInterval(timer)
            console.log('当先心跳已关闭')
          }
        })
      },time);
    }else{
      clearInterval(timer);
      console.log('当前心跳已关闭')
    }
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    wx.closeSocket();
  },


})

6.wxss页面

.my{
  text-align: right;
}

 7.配置文件

<?php
    //创建WebSocket Server对象，监听0.0.0.0:9502端口
    $ws = new Swoole\WebSocket\Server('0.0.0.0', 9502);
    
    $redis = new Redis();
    $redis->connect('127.0.0.1','6379');
    //监听WebSocket连接打开事件
    $ws->on('Open', function ($ws, $request) {
        // $ws->push($request->fd, "连接上了!!!\n");
    });
    
    //监听WebSocket消息事件 
    $ws->on('Message', function ($ws, $frame) use($redis) {
        $data = json_decode($frame->data,true);
        switch ($data['type']) {
            case 'open':
                $redis->set($data['my'],$frame->fd);
                break;
            case 'send':
                $to = $redis->get($data['to']);
                // print_r($to);
                $message = [
                    'message' => $data['data']
                ];
                // print_r($message);
                $ws->push($to,json_encode($message,true));
                break;
            case 'active':
                echo '当前心跳已重新连接';
                break;
            default:
                // code...
                break;
        }
        // echo "Message: {$frame->data}\n";
        // $ws->push($frame->fd, "server: {$frame->data}");
    });
    
    //监听WebSocket连接关闭事件
    $ws->on('Close', function ($ws, $fd) {
        echo "client-{$fd} is closed\n";
    });
    
    $ws->start();

7.另一端跟上面的一样复制一份将接收信息者调换就行了

 8.下面是心跳检测

 /**
   * 监听websocket心跳连接的方法
   */
  webSocketXin(time = 60000, status = true) {
    var timing;
    if (status == true) {
      timing = setInterval(function () {
        console.log("当前心跳已重新连接");
        //循环执行代码
        wx.sendSocketMessage({
          data: JSON.stringify({
            type: 'active'
          }),
          fail(res) {
            //关闭连接
            wx.closeSocket();
            //提示
            wx.showToast({
              title: '当前聊天已断开',
              icon: 'none'
            });
            clearInterval(timing);
            console.log("当前心跳已关闭");
          }
        });
      }, time) //循环时间，注意不要超过1分钟
    } else {
      //关闭定时器
      clearInterval(timing);
      console.log("当前心跳已关闭");
    }
  }

二例

<?php

//创建WebSocket Server对象，监听0.0.0.0:9502端口
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9521);

//监听WebSocket连接打开事件
$ws->on('Open', function ($ws, $request) use ($chatMessagesKey, $roomUserKey, $roomOnlinesKey) {
    echo $request->fd . '我连接上了';
});

//监听WebSocket消息事件
$ws->on('Message', function ($ws, $frame) {
    print_r($frame);
    //把前台传过来的json字符串转成数组
    $params = json_decode($frame->data, true);
    //判断是否是心跳消息,如果是心跳消息
    if (isset($params['type']) && isset($params['type'])=='active'){
        echo '这是心跳监听消息';
    }else{
         //先判断当前用户有没有正在连接
        if (isset($params['uid']) && !empty($params['uid'] == 666)) {
            //用户表查询当前用户  fd
            $fd = 2;
        } else {
            $fd = 1;
        }
        //客服id
        $ws->push($fd, json_encode($params, JSON_UNESCAPED_UNICODE));
    }
});

//监听WebSocket连接关闭事件
$ws->on('Close', function ($ws, $fd) {
    echo "client-{$fd} is closed\n";
});

$ws->start();