laravel + workerman 聊天室示例代码-插件库-万普插件库

这是一个简单的 Laravel + Workerman 聊天室示例代码：

1、安装 Workerman 和 Workerman-for-Websocket

在Laravel项目根目录下使用Composer安装Workerman和Workerman-for-Websocket：

composer require workerman/workerman workerman-for-websocket

2、创建聊天室控制器

在 Laravel 项目中创建一个控制器 ChatController，并添加以下方法：

count = 4;

        // 设置回调函数
        $wsWorker->onMessage = function(TcpConnection $connection, $data) {
            // 解析客户端发送的数据
            $messageData = json_decode($data, true);
            $message = $messageData['message'];

            // 发送消息给所有连接的客户端
            foreach($this->connections as $conn) {
                $conn->send(json_encode([
                    'username' => $connection->name,
                    'message' => $message
                ]));
            }
        };

        $wsWorker->onWorkerStart = function($worker) {
            echo "Worker start\n";
        };

        $wsWorker->onConnect = function(TcpConnection $connection) {
            // 给连接设置一个随机用户名
            $connection->name = 'User'.rand(1000, 9999);
            // 把连接加入到连接池中
            $this->connections[$connection->id] = $connection;
        };

        $wsWorker->onClose = function(TcpConnection $connection) {
            // 把连接从连接池中移除
            unset($this->connections[$connection->id]);
        };

        // 启动workerman
        Worker::runAll();
    }

    public function sendMessage(Request $request)
    {
        $data = [
            'message' => $request->message
        ];

        // 发送消息到 Workerman 服务器
        $client = new \Workerman\Connection\AsyncTcpConnection('ws://127.0.0.1:8000');
        $client->send(json_encode($data));
        $client->close();

        return response()->json($data);
    }
}

在这个控制器中，index 方法返回视图文件 chat.blade.php，start 方法启动 Workerman 服务，sendMessage 方法接收来自前端的消息并通过 Workerman 向所有客户端发送消息。

3、创建聊天室视图文件

创建视图文件 chat.blade.html，包括一个输入框和一个按钮用于发送消息：




    
    聊天室

在这个页面中，我们需要将收到的消息显示在 message-list 元素中，并且实现向服务器发送消息的功能。我们可以通过 jQuery 发送 AJAX 请求来实现这一功能。代码如下：

$(function() {
    // 创建 WebSocket 连接
    var ws = new WebSocket('ws://localhost:2345');

    // 监听 WebSocket 连接成功事件
    ws.onopen = function() {
        console.log('WebSocket 连接成功');
    };

    // 监听 WebSocket 收到消息事件
    ws.onmessage = function(evt) {
        var message = evt.data;
        $('#message-list').append('' + message + '');
    };

    // 监听 WebSocket 连接关闭事件
    ws.onclose = function() {
        console.log('WebSocket 连接关闭');
    };

    // 监听表单提交事件
    $('#message-form').submit(function(e) {
        e.preventDefault();
        var message = $('input[name=message]').val();
        ws.send(message);
        $('input[name=message]').val('');
    });
});

这段代码首先创建了一个 WebSocket 连接，然后监听了连接成功、收到消息和连接关闭三个事件。在收到消息事件中，它将收到的消息添加到 message-list 元素中。在表单提交事件中，它获取输入框中的消息，将其发送到服务器，并清空输入框。

这样，我们就实现了一个简单的聊天室，可以在其中发送和接收消息。当然，为了实现更多功能，我们还需要进行更多的代码编写和优化。

万普插件库

jQuery插件大全与特效教程

laravel + workerman 聊天室示例代码