使用PHP搭建实时聊天室

环境配置：

PHP 8.2
swoole 5.1

swoole框架可以让我们用短短几行代码就能搭建一个聊天室：

//创建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";
    $ws->push($frame->fd, "server: {$frame->data}");
});

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

$ws->start();

文件命名为chat.php,启动服务：

php chat.php

然后你就可以打开浏览器访问端口连接聊天室：

var wsServer = 'ws://127.0.0.1:9501';

  var websocket = new WebSocket(wsServer);
  var nickname = Math.random().toString(36).substr(2);
  thisFd = '';
  $('#nickname').html(nickname);
  websocket.onopen = function (evt) {
    console.log("服务器已连接,开始聊天吧");
  };
  //链接断开
  websocket.onclose = function (evt) {
      console.log("服务器已断开,请重新连接");
  };
  //收到服务器消息
  websocket.onmessage = function (evt) {
    //握手成功后，会接受到服务端返回的fd ，msgType = 1
    // 字符串格式化成json
    var data = eval('(' + evt.data + ')');
    console.log("evetData:",data);
    switch (data.msgType) {
      case 1:
        thisFd = data.fd;
        $('#fd-samp').html(thisFd);
        $('#fd').val(thisFd);
        break;
      case 2:
        if (data.nickname == nickname) {
          data.nickname = '我';
         }       
        console.log(data.nickname + "说：" + data.data);

        break;
    }
  };
  //服务器异常
  websocket.onerror = function (evt, e) {

    console.log("服务器异常");
  };

再搭建一个简单的界面就可以开始聊天了：

<div class="row">
  <div class="col-xs-10 col-xs-offset-1" style="margin-top:40px;">
    <div class="panel panel-info">
      <div class="panel-heading">
        PHP + Swoole 简易聊天室
      </div>
      <div class="panel-body no-padding">
        <div class="col-xs-3 user-list">

        </div>
        <div class="col-xs-9 no-padding">
          <div class="chat-list" id="content">
          </div>
          <div class="message">
            <div class="text" >
              <textarea id="msg"></textarea>
            </div>
            <div class="send" onclick="send()">
              发送
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关注公众号【幽蓝计划】并发送‘聊天室’获取本文源码。