laravel+GatewayWorker 完成IM即时通信以及文件互传功能（第三章：后端即时通信代码开发与配置项讲解）

本文链接：https://blog.youkuaiyun.com/weixin_42701376/article/details/121584485

laravel+GatewayWorker 完成IM即时通信以及文件互传功能（第三章：后端即时通信代码开发与配置项讲解及服务端调试错误）

功能简介

功能简介

本专题将带手把手带你搭建仿某信的即时通信功能并完成文件互传

应用场景

本专题实际应用场景：

聊天客服：即时通信，消息实时互传，互相发送文字、语音消息以及文件；
小规模线上竞拍；
视频实时弹幕；
物联网；
以及其他与实时消息相关的功能；

专题章节

第三章：后端即时通信代码开发与配置项讲解

一、在宝塔中创建项目

在这里插入图片描述

二、本地后端代码编写

我这里是使用laravel5.8.*版本框架、php7.4、mysql8；
在你的电脑上面使用这个命令下载laravel框架
composer create-project --prefer-dist laravel/laravel im 5.8.*
命令格式：composer create-project --prefer-dist laravel/laravel+项目名(im)+版本号(5.8.*)

在这里插入图片描述

输入上述命令后按下“Enter”回车键等待命令执行完毕；

打开GatewayWorker开发手册，手册地址： https://www.workerman.net/doc/gateway-worker/README.html
下载手册里面给我们的Demo,因为我的服务器是Linux系统，我下载的就是Linux版的Demo;
将demo解压到Laravel项目的app目录中
开始配置GatewayWorker后台代码

第一步：

	/**
     * 当客户端连接时触发
     * 如果业务不需此回调可以删除onConnect
     * 
     * @param int $client_id 连接id
     */
    public static function onConnect($client_id)
    {
        // 向当前client_id发送数据
        //Gateway::sendToClient($client_id, "Hello $client_id\r\n");
        // 向所有人发送
        //Gateway::sendToAll("$client_id login\r\n");

        //根据手册重写方法
        Gateway::sendToClient($client_id, json_encode(array(
            'type'      => 'init',//信息分类
            'client_id' => $client_id//当前用户的通讯id(唯一标识,又Gateway程序为我们自动生成)
        )));
    }

第二步：修改WebSocket协议手册地址:还记得我们之前在服务器安全组中开放的3个端口吗?
1. websocket端口:8282
2. Register服务端口:1238
3. Redisd端口:6379
  这里就用到了websocket端口和Registerf服务端口,看下你开的端口是否与下方截图一直,不一致的话就修改下方接口,注意:如果你的Register服务端口不是1238记得要把.\app\GatewayWorker目录中的端口统一替换一下,因为我的是1238接口与官方Demo中的端口一致所以我这里没有进行替换。
  https://www.workerman.net/doc/workerman/appendices/about-websocket.html
第三步：定义路由，创建前端页面，将手册的前端js示例代码copy进来，然后我们稍微改造一下前端页面；
1. 因为路由加载页面比较简单我这里直接在路由中写闭包方法进行加载页面，你也可以使用路由映射控制器-控制器加载页面；

我们稍微改造一下前端页面，修改一下ws的端口,将端口调整为8282,当然这里23行代码的连接方式不是唯一的,后面我会把其他几种链接但是在下文中详细列出来;
这里我们我们还需要暂时注释原Demo的绑定方法,以为暂时没有写绑定控制器,现在访问的换就会报错;

在这里插入图片描述

上图中23行的链接方式如下,请根据实际情况使用;
打开一个 web socket (以下链接方式任选一种即可)
参数解释：var ws = new WebSocket(“参数A://参数B:参数C”);
参数A：固定写法
ws：表示http连接
wss:表示https连接,有https证书的时候使用
参数B：要连接的地址。
可选参数：127.0.0.1 表示：本地地址
可选参数：48.662.156.869 表示：你的云服务器的公网ip （48.662.156.869这个ip是我假设的云服务器公网ip）
可选参数：im.liutong.pro 表示：这个你的http域名如（http://im_dev.liutong.pro）
可选参数：im.liutong.pro 表示：这个是你的https网址域名如（https://im.liutong.pro）
参数C：端口号
端口号是可以自定义的（注意取值范围）。记得在服务器->实例安全组中进行放行。
端口号取值范围：端口不能大于65535，请确认端口没有被其它程序占用，否则启动会报错。如果端口小于1024，需要root权限运行GatewayWorker才能有权限监听，否则报错没有权限。(详情参见手册->《Gateway类的使用》->“初始化”->“ip”)
注意：这里的端口号必须和你在 “项目名\app\GatewayWorker\Applications\YourApp\start_gateway.php” 中$gateway = new Gateway(“websocket://0.0.0.0:8282”);这段代码的端口号保持一致。

//以下4种方式,请更具你的实际情况4选一;
var ws = new WebSocket("ws://127.0.0.1:8282");//进行webSocket的几种方式（方式A：常规操作）

var ws = new WebSocket("ws://47.104.249.193:8282");//进行webSocket的几种方式（方式B：使用本机公网ip进行连接）

var ws = new WebSocket("ws://imim.liutong.pro:8282");//进行webSocket的几种方式（方式C:使用http://im_dev.liutog.pro的方式进行连接）

var ws = new WebSocket("wss://im.liutong.pro:8282");//进行webSocket的几种方式（方式D：使用HTTPS的方式进行连接，域名：https:im.liutong.pro）

我的indexA.blade.php前端代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
用户A
</body>
<script src="{{asset('js/jquery.min.js')}}"></script>
<script>
    /**
     * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     * 其中端口为Gateway端口，即start_gateway.php指定的端口。
     * start_gateway.php 中需要指定websocket协议，像这样
     * $gateway = new Gateway(websocket://0.0.0.0:7272);
     */
    //ws = new WebSocket("ws://your_domain.com:7272");
    ws = new WebSocket("ws://im.liutong.pro:8282");//这里的端口要与.\app\GatewayWorker\Applications\YourApp\start_gateway.php中$gateway = new Gateway("websocket://0.0.0.0:8282");的端口保持一致;
    // 服务端主动推送消息时会触发这里的onmessage
    ws.onmessage = function(e){
        // json数据转换成js对象
        var data = eval("("+e.data+")");
        var type = data.type || '';
        console.log(type);
        switch(type){
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                console.log(data);
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                //$.post('./bind.php', {client_id: data.client_id}, function(data){}, 'json');
                break;
            // 当mvc框架调用GatewayClient发消息时直接alert出来
            default :
                alert(e.data);
        }
    };
</script>
</html>