Merge pull request #39 from iazaran/feature/websocket

Feature/websocket

README.md

@@ -4,7 +4,7 @@
 
 > This project tries to cover some PHP features in a simple MVC structure with minimum installed composer packages. Then developers can use packages for specific requirements. Please add your ideas in Discussions, ask features or report bugs in issues.
 
-💡 TODO: SEO & WebSocket
+💡 TODO: SPL
 
 #### Features:
 **List of features related with structure**
@@ -16,6 +16,10 @@ Assets can contain your media files like images, audios & videos.
 Contains the styles & scripts _(After changes on these files, you can use minifier script to update minified versions, just run `docker-compose exec php-mvc-app php minifier.php`)_
 - **public/feed**
 There is a RSS generator in here and runs after creation or updating a post.
+- **grpc**
+A simple router for distribute the requests to different services. It is not working yet and I created an issue for it ⚠ and if you have an idea or a solution, only by PHP for both server and client sides, please add your solution in there.
+- **websocket**
+A WebSocket sample. You can open /websocket route in 2 tabs and test the websocket connection.
 - **src**
 Contains migrations for a DB and routes.
 - **src/App**

composer.json

@@ -32,6 +32,7 @@
         "ext-iconv": "*",
         "ext-memcached": "*",
         "ext-grpc": "*",
+        "ext-sockets": "*",
         "phpmailer/phpmailer": "6.5.4",
         "grpc/grpc": "1.42.0",
         "google/protobuf": "3.19.4"

docker-compose.yml

@@ -23,6 +23,17 @@ services:
         networks:
             - php-mvc-network
 
+    php-mvc-websocket-server:
+        image: nginx:alpine
+        container_name: php-mvc-websocket-server
+        volumes:
+            - ./:/var/www
+            - ./docker/nginx_websocket:/etc/nginx/conf.d/
+        ports:
+            - '9090:80'
+        networks:
+            - php-mvc-network
+
     php-mvc-app:
         build:
             context: .
@@ -50,6 +61,19 @@ services:
         networks:
             - php-mvc-network
 
+    php-mvc-websocket:
+        build:
+            context: .
+            dockerfile: docker/Dockerfile
+        container_name: php-mvc-websocket
+        user: www
+        command: php /var/www/websocket/index.php
+        volumes:
+            - ./:/var/www
+            - ./docker/php/local.ini:/usr/local/etc/php/conf.d/local.in
+        networks:
+            - php-mvc-network
+
     php-mvc-db:
         image: mysql
         container_name: php-mvc-db

docker/Dockerfile

@@ -11,7 +11,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*
 
 RUN docker-php-ext-configure gd --with-freetype=/usr/include/ --with-jpeg=/usr/include/
-RUN docker-php-ext-install mysqli pdo pdo_mysql gd
+RUN docker-php-ext-install mysqli pdo pdo_mysql gd sockets
 RUN pecl install -o -f memcached \
     && docker-php-ext-enable memcached
 RUN pecl install grpc \

docker/nginx_http1/default.conf

@@ -17,7 +17,7 @@ server {
         fastcgi_pass php-mvc-app:9000;
         fastcgi_index index.php;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
-        fastcgi_param PHP_VALUE "error_log=/var/log/nginx/application_php_errors.log";
+        fastcgi_param PHP_VALUE "error_log=/var/log/nginx/app_php_errors.log";
         fastcgi_param PATH_INFO $fastcgi_path_info;
     }
 }

docker/nginx_http2/default.conf

@@ -17,7 +17,7 @@ server {
         fastcgi_pass php-mvc-app:9000;
         fastcgi_index index.php;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
-        fastcgi_param PHP_VALUE "error_log=/var/log/nginx/application_php_errors.log";
+        fastcgi_param PHP_VALUE "error_log=/var/log/nginx/grpc_php_errors.log";
         fastcgi_param PATH_INFO $fastcgi_path_info;
     }
 }

docker/nginx_websocket/default.conf

@@ -0,0 +1,23 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+}
+
+upstream websocket {
+    server php-mvc-websocket:9090;
+}
+
+server {
+    listen 80;
+    client_max_body_size 108M;
+    access_log /var/log/nginx/websocket.access.log;
+    error_log /var/log/nginx/websocket.error.log;
+
+    location / {
+        proxy_pass http://websocket;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+        proxy_set_header Host $host;
+    }
+}

public/js/main.js

@@ -1,3 +1,80 @@
+/**
+ * Set cookie
+ *
+ * @param name
+ * @param value
+ * @param expiresDay
+ */
+function setCookie(name, value, expiresDay) {
+    const d = new Date();
+    d.setTime(d.getTime() + (expiresDay * 24 * 60 * 60 * 1000));
+    let expires = "expires=" + d.toUTCString();
+
+    document.cookie = name + "=" + value + ";" + expires + ";path=/";
+}
+
+/**
+ * Get cookie
+ *
+ * @param name
+ * @returns {string}
+ */
+function getCookie(name) {
+    let cookieName = name + "=";
+    let ca = document.cookie.split(";");
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === " ") {
+            c = c.substring(1);
+        }
+        if (c.indexOf(cookieName) === 0) {
+            return c.substring(cookieName.length, c.length);
+        }
+    }
+
+    return "";
+}
+
+/**
+ * Add message to existing ones on chat
+ *
+ * @param messageHTML
+ */
+function showMessage(messageHTML) {
+    $("#output").append(messageHTML);
+}
+
+function handleChat() {
+    let webSocket = new WebSocket("ws://localhost:9090");
+
+    webSocket.onopen = function (event) {
+        showMessage("<small class='text-success'>Successfully entered the room...</small>");
+    };
+
+    webSocket.onmessage = function (event) {
+        let data = JSON.parse(event.data);
+        showMessage("<p>" + data.message + "</p>");
+        $("#message").val("");
+    };
+
+    webSocket.onerror = function (event) {
+        showMessage("<small class='text-danger'>Problem due to some Error!</p>");
+    };
+
+    webSocket.onclose = function (event) {
+        showMessage("<small class='text-success'>Connection Closed</small>");
+    };
+
+    $("#chat-submit").on("click", function (event) {
+        event.preventDefault();
+        let messageJSON = {
+            name: $("#client-name").val(),
+            message: $("#message").val()
+        };
+        webSocket.send(JSON.stringify(messageJSON));
+    });
+}
+
 $(document).ready(function () {
     /**
      * Start summernote if needed
@@ -44,7 +121,7 @@ $(document).ready(function () {
      * for form and blog-create-submit for it"s button. Form"s buttons
      * need to have constant form-button class.
      */
-    body.on("click", ".form-button", function(event) {
+    body.on("click", ".form-button", function (event) {
         let elementId = $(this).attr("id");
         elementId = elementId.replace("-submit", "");
 
@@ -139,41 +216,8 @@ $(document).ready(function () {
             }
         });
     });
-});
-
-/**
- * Set cookie
- *
- * @param name
- * @param value
- * @param expiresDay
- */
-function setCookie(name, value, expiresDay) {
-    const d = new Date();
-    d.setTime(d.getTime() + (expiresDay * 24 * 60 * 60 * 1000));
-    let expires = "expires="+d.toUTCString();
-
-    document.cookie = name + "=" + value + ";" + expires + ";path=/";
-}
 
-/**
- * Get cookie
- *
- * @param name
- * @returns {string}
- */
-function getCookie(name) {
-    let cookieName = name + "=";
-    let ca = document.cookie.split(";");
-    for(let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) === " ") {
-            c = c.substring(1);
-        }
-        if (c.indexOf(cookieName) === 0) {
-            return c.substring(cookieName.length, c.length);
-        }
+    if (window.location.pathname === "/websocket") {
+        handleChat();
     }
-
-    return "";
-}
+});