利用Swoft实现PHP+websocket直播，即时通讯代码

最新推荐文章于 2025-04-06 11:16:06 发布

宋文飞

最新推荐文章于 2025-04-06 11:16:06 发布

阅读量4k

点赞数 6

分类专栏：详解文档文章标签： swoft webrtc turnserver php

本文链接：https://blog.youkuaiyun.com/xiaofeiqaq/article/details/91864991

版权

PHP.swoft 框架部分

用swoft框架做webSocket服务器 linux 环境

一、推荐用 composer 安装 swoft 框架。 ^{这里只做概述不讲详细安装步骤}

composer create-project swoft/swoft swoft安装完后进入目录
Alt

二、安装好后需要引入 WebSocket 服务

composer require swoft/websocket-server

三、配置ws端口文件 .env

一般就在 swoft/.env 这里找到 #HTTP 部分
HTTP_PORT这个是项目运行后，监听socket端口

# HTTP
HTTP_HOST=0.0.0.0
HTTP_PORT=8188 
HTTP_MODE=SWOOLE_PROCESS
HTTP_TYPE=SWOOLE_SOCK_TCP

四、创建控制器 websocket 控制器

php bin/swoft gen:websocket Camera --prefix /Camera
生成的代码一般在 swoft/app/WebSocket/xxx.php

/**
 * Class CameraController
 * @package App\WebSocket
 * @WebSocket("/con_camera/camera")
 */
class CameraController implements HandlerInterface

注意 @WebSocket("/con_camera/camera") 这里是访问的路由需要自己改

/**
 * @param Server $server
 * @param Request $request
 * @param int $fd
 */
public function onOpen(Server $server, Request $request, int $fd)
{
     
     $server->push($fd, '{"type":"id", "id":"'.$fd.'"}');
}

/**
 * @param Server $server
 * @param Frame $frame
 * @return mixed
 */
public function onMessage(Server $server, Frame $frame)
{
     
	// 这里是广播。 自己发出的内容，不广播给自己
    \Swoft::$server->sendToSome($frame->data, [], [$frame->fd]);
     // $server->push($frame->fd, $frame->data);
}

/**
 * @param Server $server
 * @param int $fd
 * @return mixed
 */
public function onClose(Server $server, int $fd)
{
     
    $server->close($fd);
    // do something. eg. record log
}

后台运行swoft项目 php bin/swoft ws:restart -d
结束用 php bin/swoft ws:stop

五、测试代码

大家可以在 function onOpen函数内做打印

    /**
     * @param Server $server
     * @param Request $request
     * @param int $fd
     */
    public function onOpen(Server $server, Request $request, int $fd)
    {
     
        var_dump($fd,'这里是测试部分');
        $server->push($fd, '{"type":"id", "id":"'.$fd.'"}');
    }

测试方法很多，我只用 websocket 测试 谷歌浏览器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	</head>
<body>
<script type="text/javascript">
function websocketOpen () {
      
    if ("WebSocket" in window) {
      
        alert("您的浏览器支持 WebSocket!")
        return false;
    } else {
      
        // 浏览器不支持 WebSocket123
        alert("您的浏览器不支持 WebSocket!");
        return true;
    }
}

if(websocketOpen()){
      
    console.log('链接失败')
}

let ws = new WebSocket("wss://localhost.com/con_camera/camera");

ws.onopen = function (evt) {
      
    alert('连接成功')
}

ws.onmessage = function (evt) {
      
    let received_msg = evt.data
    console.log(received_msg);
}

ws.onclose = function (){
      
    alert('关闭链接')
}

</script>
</body>
</html>

new WebSocket(“wss://localhost.com/con_camera/camera”)
这里 wss代表服务器配置了https证书，如果服务器没有配置证书需要用 ws
在这里插入图片描述

以上内容是PHP部分，没有多少需要编辑的。php.swoft只做转发和广播

webRtc部分

首先需要了解WebSocket，MediaDevices，RTCPeerConnection，信令服务器作用

WebSocket

基本都知道吧，不懂的看官方文档

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

基本理解成它是一个双向管道

MediaDevices 媒体设备

简单的理解成。调用媒体设备，获取摄像头^媒体设备输入的信息官方文档

RTCPeerConnection

简单理解成本地到远端的连接官方文档
官方推荐引入Adapter.js保持浏览器的兼容性

信令服务器

作为webRTC中极为重要的一部分，会话管理需要建立服务器端与客户端之间的连接。
有人就问了：webRTC建立的是点对点连接，流数据是从浏览器直接传输到另一个浏览器，不需要服务器周转，怎么还需要建立服务器端与客户端连接呢？
这是个很好的问题！尽管webRTC建立的是P2P连接，但由于流数据传输需要一条信道，而这个信道则是由信令服务器提供的。而在webRTC中并没有这一过程，所以需要我们手动建立信号的传递和交涉过程。

信令服务器的实现软件有很多，我们这里用coturn官方文档

参考原文：https://blog.youkuaiyun.com/vainfanfan/article/details/82632737

我们组合一下信息

看着应该能明白了

主播与客户端建立websocket通道
通过web获取流媒体MediaDevices
主播生成流媒体通道插座信息，通过websocket传输给客户，客户受到信息后设置插销信息
与主播建立流媒体通道RTCPeerConnection。并且把主播把流媒体通过流媒体通道传给客户端
这中间通过coturn信令服务器把流媒体穿透给外网，让客户端可以在外网获取

步骤很简单，但是中间遇到很多坑，我会把遇到的问题，也列出来

实现MediaDevices获取流媒体

需要的文件

jquery-3.2.1.min.js

adapter.js这个最好用迅雷下载

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="description" content="php web-rtc例子,一对一聊天-基于workerman">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta itemprop="description" content="Video chat using the reference WebRTC application">
    <meta itemprop="name" content="AppRTC">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name

最低0.47元/天解锁文章