Websocket trên Laravel

Giới thiệu chung

Websocket là một khái niệm khá quen thuộc với hầu hết các developer. Nó là công nghệ hỗ trợ giao tiếp giữa client và server bằng cách sử dụng một TCP socket để tạo một kết nối hiệu quả. Mặc dù được thiết kế chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa chúng vào bất kì loại ứng dụng nào khác.

Ưu điểm

WebSockets cung cấp khả năng giao tiếp hai chiều mạnh mẽ, có độ trễ thấp và dễ xử lý lỗi. Không cần phải có nhiều kết nối như phương pháp Comet long-polling và cũng không có những nhược điểm như Comet streaming. API cũng rất dễ sử dụng trực tiếp mà không cần bất kỳ các tầng bổ sung nào, so với Comet, thường đòi hỏi một thư viện tốt để xử lý kết nối lại, thời gian chờ timeout, các Ajax request (yêu cầu Ajax), các tin báo nhận và các dạng truyền tải tùy chọn khác nhau (Ajax long-polling và jsonp polling).

Nhược điểm

Những nhược điểm của WebSockets gồm có:

Nó là một đặc tả mới của HTML5, nên nó vẫn chưa được tất cả các trình duyệt hỗ trợ.

Không có phạm vi yêu cầu nào. Do WebSocket là một TCP socket chứ không phải là HTTP request, nên không dễ sử dụng các dịch vụ có phạm vi-yêu cầu, như SessionInViewFilter của Hibernate. Hibernate là một framework kinh điển cung cấp một bộ lọc xung quanh một HTTP request.

Khi bắt đầu một request, nó sẽ thiết lập một contest (chứa các transaction và liên kết JDBC) được ràng buộc với luồng request. Khi request đó kết thúc, bộ lọc hủy bỏ contest này.

Vậy là tôi đã giới thiệu tổng quan cho các bạn về websocket Những ưu điểm và nhược điểm khi sử dụng websocket.

Bây giờ tôi sẽ hướng dẫn các bạn sử dụng websocket trong Laravel.

Cách install Laravel các bạn có thể tham khảo ở bài viết này: https://viblo.asia/phamkykhoi/posts/ZK1ov1VxR5b9

Trong thư mục root của project các bạn tạo ra một file server.php như sau

<?php
    $host = 'localhost'; //host
    $port = '80'; //port
    $null = null; //null var

    //Create TCP/IP sream socket
    $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
    //reuseable port
    socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);

    //bind socket to specified host
    socket_bind($socket, $host, $port);

    //listen to port
    socket_listen($socket);

    //create & add listning socket to the list
    $clients = [$socket];

    //start endless loop, so that our script doesn't stop
    while (true) {
        //manage multipal connections
        $changed = $clients;
        //returns the socket resources in $changed array
        socket_select($changed, $null, $null, 0, 10);

        //check for new socket
        if (in_array($socket, $changed)) {
            $socket_new = socket_accept($socket); //accpet new socket
            $clients[] = $socket_new; //add socket to client array

            $header = socket_read($socket_new, 1024); //read data sent by the socket
            perform_handshaking($header, $socket_new, $host, $port); //perform websocket handshake

            socket_getpeername($socket_new, $ip); //get ip address of connected socket
            $response = mask(json_encode(['type' => 'system', 'message' => $ip . ' connected'])); //prepare json data
            send_message($response); //notify all users about new connection

            //make room for new socket
            $found_socket = array_search($socket, $changed);
            unset($changed[$found_socket]);
        }

        //loop through all connected sockets
        foreach ($changed as $changed_socket) {

            //check for any incomming data
            while (socket_recv($changed_socket, $buf, 1024, 0) >= 1) {
                $received_text = unmask($buf); //unmask data
                $tst_msg = json_decode($received_text); //json decode
                $user_name = $tst_msg->name; //sender name
                $user_message = $tst_msg->message; //message text
                $user_color = $tst_msg->color; //color

                //prepare data to be sent to client
                $response_text = mask(json_encode(['type' => 'usermsg', 'name' => $user_name, 'message' => $user_message, 'color' => $user_color]));
                send_message($response_text); //send data
                break 2; //exist this loop
            }

            $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);
            if ($buf === false) { // check disconnected client
                // remove client for $clients array
                $found_socket = array_search($changed_socket, $clients);
                socket_getpeername($changed_socket, $ip);
                unset($clients[$found_socket]);

                //notify all users about disconnected connection
                $response = mask(json_encode(['type' => 'system', 'message' => $ip . ' disconnected']));
                send_message($response);
            }
        }
    }
    // close the listening socket
    socket_close($sock);

    function send_message($msg)
    {
        global $clients;
        foreach ($clients as $changed_socket) {
            @socket_write($changed_socket, $msg, strlen($msg));
        }

        return true;
    }

    //Unmask incoming framed message
    function unmask($text)
    {
        $length = ord($text[1]) & 127;
        if ($length == 126) {
            $masks = substr($text, 4, 4);
            $data = substr($text, 8);
        } elseif ($length == 127) {
            $masks = substr($text, 10, 4);
            $data = substr($text, 14);
        } else {
            $masks = substr($text, 2, 4);
            $data = substr($text, 6);
        }
        $text = "";
        for ($i = 0; $i < strlen($data); ++$i) {
            $text .= $data[$i] ^ $masks[$i % 4];
        }

        return $text;
    }

    //Encode message for transfer to client.
    function mask($text)
    {
        $b1 = 0x80 | (0x1 & 0x0f);
        $length = strlen($text);

        if ($length <= 125)
            $header = pack('CC', $b1, $length);
        elseif ($length > 125 && $length < 65536)
            $header = pack('CCn', $b1, 126, $length);
        elseif ($length >= 65536)
            $header = pack('CCNN', $b1, 127, $length);

        return $header . $text;
    }

    //handshake new client.
    function perform_handshaking($receved_header, $client_conn, $host, $port)
    {
        $headers = [];
        $lines = preg_split("/\r\n/", $receved_header);
        foreach ($lines as $line) {
            $line = chop($line);
            if (preg_match('/\A(\S+): (.*)\z/', $line, $matches)) {
                $headers[$matches[1]] = $matches[2];
            }
        }

        $secKey = $headers['Sec-WebSocket-Key'];
        $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
        //hand shaking header
        $upgrade = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
            "Upgrade: websocket\r\n" .
            "Connection: Upgrade\r\n" .
            "WebSocket-Origin: $host\r\n" .
            "WebSocket-Location: ws://$host:$port/server.php\r\n" .
            "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
        socket_write($client_conn, $upgrade, strlen($upgrade));
    }

Tiếp theo các bạn tạo một form chat đơn giản như sau

resources\views\chat.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'/>
    <style type="text/css">
        .chat_wrapper {
            width: 500px;
            margin-right: auto;
            margin-left: auto;
            background: #CCCCCC;
            border: 1px solid #999999;
            padding: 10px;
            font: 12px 'lucida grande', tahoma, verdana, arial, sans-serif;
        }

        .chat_wrapper .message_box {
            background: #FFFFFF;
            height: 150px;
            overflow: auto;
            padding: 10px;
            border: 1px solid #999999;
        }

        .chat_wrapper .panel input {
            padding: 2px 2px 2px 5px;
        }
        .system_msg { color: #BDBDBD; font-style: italic; }
        .user_name { font-weight: bold; }
        .user_message { color: #88B6E0; }
    </style>
</head>
<body>
    <div class="chat_wrapper">
        <div class="message_box" id="message_box"></div>
        <div class="panel">
            <input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" style="width:20%"/>
            <input type="text" name="message" id="message" placeholder="Message" maxlength="80" style="width:60%"/>
            <button id="send-btn">Send</button>
        </div>
    </div>
</body>
</html>

Tiếp theo các bạn tạo một file

public\chat.js

$(document).ready(function () {
    //create a new object WebSocket
    // Ở đây domain VirtualHost tôi để là laravel.dev
    var wsUri = "ws://laravel.dev/server.php";
    websocket = new WebSocket(wsUri);

    websocket.onopen = function (ev) { // connection is open
        $('#message_box').append("<div class=\"system_msg\">Connected!</div>"); //notify user
    }

    $('#send-btn').click(function () { //use clicks message send button
        var mymessage = $('#message').val(); //get message text
        var myname = $('#name').val(); //get user name

        if (myname == "") { //empty name?
            alert("Enter your Name please!");
            return;
        }
        if (mymessage == "") { //emtpy message?
            alert("Enter Some message Please!");
            return;
        }

        //prepare json data
        var msg = {
            message: mymessage,
            name: myname,
            color: '<?php echo $colours[$user_colour]; ?>'
        };

        //convert and send data to server
        websocket.send(JSON.stringify(msg));
    });

    // Return message from server
    websocket.onmessage = function (ev) {
        var msg = JSON.parse(ev.data); //PHP sends Json data
        var type = msg.type; //message type
        var umsg = msg.message; //message text
        var uname = msg.name; //user name
        var ucolor = msg.color; //color

        if (type == 'usermsg' && umsg != null) {
            $('#message_box').append("<div><span class=\"user_name\" style=\"color:#" + ucolor + "\">" + uname + "</span> : <span class=\"user_message\">" + umsg + "</span></div>");
        }
        if (type == 'system' && umsg != null) {
            $('#message_box').append("<div class=\"system_msg\">" + umsg + "</div>");
        }

        $('#message').val(''); //reset text
    };

    websocket.onerror = function (ev) {
        $('#message_box').append("<div class=\"system_error\">Error Occurred - " + ev.data + "</div>");
    };
    websocket.onclose = function (ev) {
        $('#message_box').append("<div class=\"system_msg\">Connection Closed</div>");
    };
});

Ở file resources\views\chat.blade.php các bạn nhúng thêm file js vào tạo vào.

<script src='chat.js'></script>

Tiếp theo các bạn tạo một routes để chạy views chat của mình

Route::get('chat', function () {
    return view('chat');
});

Bây giờ các bạn chạy web lên với domain là http://laravel.dev/chat Sau đó các bạn mở command line lên. Truy xuất vào thư mục project của mình và chạy lệnh.

php server.php

Lúc này các bạn có thể sử dụng được ứng dụng chat của mình với websocket trên Laravel.

Ở bài này tôi chia sẻ cho các bạn cách để có thể chạy được websocket trên Laravel. Ở những bài sau tôi sẽ chia sẽ kỹ hơn các vấn đề trong websocket.

Chúc các bạn học tốt !