Jump to content

sagnik

Members
  • Posts

    448
  • Joined

  • Last visited

  • Days Won

    1

sagnik last won the day on February 23 2018

sagnik had the most liked content!

About sagnik

  • Birthday 09/13/1996

Contact Methods

  • MSN
    sagnikganguly2012
  • Website URL
    http://www.sgnetworks.cf
  • Yahoo
    sagnikganguly0

Profile Information

  • Gender
    Male
  • Location
    Durgapur, West Bengal, India
  • Interests
    Internet, Computer, Coding, Website Designing

sagnik's Achievements

Newbie

Newbie (1/14)

4

Reputation

  1. Username: sgn Main Domain: sgn.heliohost.org
  2. Hi once again. As some of you might know that I'm currently working on a Machine Learning project in PHP, so I've already asked for help with drawing charts using the PHP GD library and I'm glad to let you know that the problem has been solved. But now I've got another problem (maybe I couldn't understand the logic). So let me describe the problem, as I've finished the basics of a Machine Learning library (Maths, Statistics & Charts), I've started to build the Natural Language Processing (NLP) module, I wouldn't say that the module is not working but not as expected. I've created a bot with a corpus about "Chatbots (from Wikipedia)" to test the module and the bot is replying very well but not as expected and I think I know why, because I couldn't add Grammars & Lemmatization so when I ask the bot something like (who is the created the Chatbots?, what chatbots do?, etc.) it's not replying with a proper answer instead its replying based on the algorithm I've used which is "TFIDF Vector" & "Cosine Similarity" so if I send first 1 or more words it is replying with the sentence that starts with the word(s) I've sent. So basically it's unaware of answering the question formally. And about Lemmatization I'm using the "Lemmatizer by WriteCrow - based on the WordNet project by Princeton University" but I couldn't find a way to implement it and even I don't know if after implementing Lemmatization it will fix the problem or not but it worths a try. So I need a way to implement the feature. If anyone knows anything about it, it'll be a great help for me and obviously I'll get into more troubles when I progress through the project and if anyone would like to contribute/collaborate with me you can reply in this post or PM me.
  3. I understand but I want it to be solely based on PHP. It would be better if I could do it without any dependencies. And I'm trying to avoid any type of client-side scripts for now. But I'll do it for sure in the future. The project I'm currently working on is "PHPML" which is a PHP implementation of some Python Machine Learning libraries (like NumPy, scipy, matplotlib, NLP, etc.) as the project is currently under development I don't want to mess with client-side. I want the users to just import one PHP Script on a page and access all the libraries. But in the future if it becomes a need to include some javascripts for any reason I lok into it but for now I want to stick with PHP GD (if possible).
  4. Hello again, I've got a problem with PHP GD. The problem is I'm trying to draw charts (i.e.Bar) and I'm trying to draw the Bell Curve of a data or an array with "Normal Distribution", but the problem is the chart is not fitting inside the allocated image size (1920 x 1080) so the chart is exceeding the boundaries of the image. So I've just tried a library "JpGraph" it works very well but doesn't fit my requirements, so I saw that the library is using some kind of canvas to draw the chart and then merging the image with the original one and I'm trying to do the same but I couldn't understand how. Please help me out, it's very urgent, I've to finish the project within a week. public function histogram(array $samples, int $bins, string $heading = null, string $xAxisHeading = null, string $yAxisHeading = null) { if(is_array($samples)) { $data = $_bins = $this->calculateBins($samples, $bins); /* * Chart settings and create image */ // Margin between label and axis $labelMargin = 8; $count = count($samples); // Max value on y-axis $yMaxValue = max(array_column($data, 'count')); if($yMaxValue % 2 == 1) $yMaxValue++; // Distance between grid lines on y-axis $yLabelSpan = ceil($yMaxValue / $bins); $t1 = ($yLabelSpan * $bins); if($t1 > $yMaxValue) $yMaxValue = $t1; // Bar and line width $lineWidth = 1; $barWidth = 20; // Image dimensions $imageWidthActual = round(count($data) * $barWidth * ($labelMargin / 2)); $imageHeightActual = round((count($data) / 2) * $count / 2); $imageWidth = min(1920, $imageWidthActual); $imageHeight = min(1024, $imageHeightActual); // Grid dimensions and placement within image $gridTop = 40; $gridBottom = round(($imageHeight - $gridTop)); $gridLeft = 50; $gridRight = round(($imageWidth - $gridLeft)); $gridHeight = $gridBottom - $gridTop; $gridWidth = $gridRight - $gridLeft; // Bar space $barSpacing = $gridWidth / count($data); // Font settings $font = PHPML_ROOT.'assets/fonts/OpenSans-Regular.ttf'; $headingFont = PHPML_ROOT.'assets/fonts/OpenSans-Bold.ttf'; $fontSize = 10; $headingFontSize = 12; // Init image $chart = imagecreatetruecolor($imageWidth, $imageHeight); // Setup colors $backgroundColor = imagecolorallocate($chart, 255, 255, 255); $headingColor = imagecolorallocate($chart, 0, 0, 0); $axisColor = imagecolorallocate($chart, 85, 85, 85); $gridColor = imagecolorallocate($chart, 212, 212, 212); //$barColor = imagecolorallocate($chart, 47, 133, 217); $labelColor = $axisColor; imagefill($chart, 0, 0, $backgroundColor); imagesetthickness($chart, $lineWidth); /* * Print grid lines bottom up and Y-Labels */ for($i = 0; $i <= $yMaxValue; $i += $yLabelSpan) { $y = $gridBottom - $i * $gridHeight / $yMaxValue; // draw the line imageline($chart, $gridLeft, $y, $gridRight, $y, $gridColor); // draw right aligned label $labelBox = imagettfbbox($fontSize, 0, $font, strval($i)); $labelWidth = $labelBox[4] - $labelBox[0]; $labelX = $gridLeft - $labelWidth - $labelMargin; $labelY = $y + $fontSize / 2; imagettftext($chart, $fontSize, 0, $labelX, $labelY, $labelColor, $font, strval($i)); } /* * Draw x- and y-axis */ imageline($chart, $gridLeft, $gridTop, $gridLeft, $gridBottom, $axisColor); //Left //imageline($chart, $gridRight, $gridTop, $gridRight, $gridBottom, $axisColor); //Right //imageline($chart, $gridLeft, $gridTop, $gridRight, $gridTop, $axisColor); //Top imageline($chart, $gridLeft, $gridBottom, $gridRight, $gridBottom, $axisColor); //Bottom $headingBox = $this->getTextBoundingBox($chart, $headingFontSize, $headingFont, strval($heading), 0); $xAxisHeadingBox = $this->getTextBoundingBox($chart, $fontSize, $font, strval($xAxisHeading), 0); $yAxisHeadingBox = $this->getTextBoundingBox($chart, $fontSize, $font, strval($yAxisHeading), 90); if(!empty($heading)) imagettftext($chart, $headingFontSize, 0, $headingBox['x']['center'], $headingBox['y']['top'], $headingColor, $headingFont, $heading); if(!empty($xAxisHeading)) imagettftext($chart, $fontSize, 0, $xAxisHeadingBox['x']['center'], $xAxisHeadingBox['y']['bottom'], $headingColor, $font, $xAxisHeading); if(!empty($yAxisHeading)) imagettftext($chart, $fontSize, 90, $yAxisHeadingBox['x']['left'], $yAxisHeadingBox['y']['middle'], $headingColor, $font, $yAxisHeading); /* * Draw the bars with X-labels */ $itemX = $gridLeft + $barSpacing / 2; $canvasWidth = ($imageWidth * 2); $canvasHeight = ($imageHeight * 2); $canvas = imagecreatetruecolor($canvasWidth, $canvasHeight); $canvasBackgroundColor = imagecolorallocate($canvas, 255, 255, 255); $labelColor = imagecolorallocate($canvas, 85, 85, 85); $barColor = imagecolorallocate($canvas, 47, 133, 217); imagefill($canvas, 0, 0, $canvasBackgroundColor); foreach($data as $key => $bin) { // Draw the label $labelBox = imagettfbbox($fontSize, 0, $font, $key); $labelWidth = $labelBox[4] - $labelBox[0]; $labelX = $itemX - $labelWidth / 2; $labelY = $gridBottom + $labelMargin + $fontSize; imagettftext($canvas, $fontSize, 0, $labelX, $labelY, $labelColor, $font, $key); foreach($bin as $k=>$value) { // Draw the bar $x1 = $itemX - $barWidth / 2; $y1 = $gridBottom - $value / $yMaxValue * $gridHeight; $x2 = $itemX + $barWidth / 2; $y2 = $gridBottom - 1; imagefilledrectangle($canvas, $x1, $y1, $x2, $y2, $barColor); } $itemX += $barSpacing; } $resized = $this->resize($canvas, $imageWidth, $imageHeight); imagealphablending($canvas, false); imagesavealpha($canvas, true); //imagecopyresampled($chart, $canvas, 0, 0, 0, 0, $canvasWidth, $canvasHeight, $imageWidth, $imageHeight); imagecopymerge($chart, $resized, 0, 0, 0, 0, $canvasWidth, $canvasHeight, 100); //imagecopyresized($chart, $canvas, 10, 10, 0, 0, $canvasWidth, $canvasHeight, $imageWidth, $imageHeight); /* * Output image to browser */ //header('Content-Type: image/png'); ob_start(); imagepng($chart); $outBlob = ob_get_contents(); ob_end_clean(); imagedestroy($canvas); imagedestroy($chart); $outImg = "data: image/png;base64,".base64_encode($outBlob); /* * Output image to file */ //imagepng($chart, 'chart.png'); return $outImg; } return false; }
  5. Okay, so finally I've solved the problem. What I did is, changed the virtual-ssl-host configuration and httpd.conf. Here is the new configurations: httpd-ahssl.conf/httpd-ssl.conf: <VirtualHost _default_:443> SSLEngine on ServerName localhost:443 SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt" SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem" DocumentRoot "${SRVROOT}/htdocs" # DocumentRoot access handled globally in httpd.conf CustomLog "${SRVROOT}/logs/ssl_request.log" \ "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b" <Directory "${SRVROOT}/htdocs"> Options Indexes Includes FollowSymLinks AllowOverride AuthConfig Limit FileInfo Require all granted </Directory> SSLProxyEngine on ProxyPass /ws/ ws://localhost:9000 ProxyPassReverse /ws/ ws://localhost:9000 ProxyRequests off </VirtualHost> <VirtualHost 192.168.1.201:443> DocumentRoot "${SRVROOT}/htdocs" ServerName 192.168.1.201 SSLEngine on #SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL SSLCipherSuite ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt" SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem" SSLCertificateChainFile "${SRVROOT}/conf/ssl/ca-chain.pem" #SSLProxyCACertificateFile "${SRVROOT}/conf/ssl/localhost.crt" SSLProxyEngine on #SSLProxyVerify none #SSLProxyCheckPeerCN off #SSLProxyCheckPeerName off ProxyPass /ws/ ws://192.168.1.201:9000 ProxyPassReverse /ws/ ws://192.168.1.201:9000 ProxyRequests off ErrorLog "${SRVROOT}/logs/error.log" CustomLog "${SRVROOT}/logs/access.log" common LogLevel warn </VirtualHost> httpd.conf: (here I've just loaded almost all the modules related to mod_proxy) LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_ajp_module modules/mod_proxy_ajp.so LoadModule proxy_balancer_module modules/mod_proxy_balancer.so LoadModule proxy_connect_module modules/mod_proxy_connect.so LoadModule proxy_express_module modules/mod_proxy_express.so LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so #LoadModule proxy_html_module modules/mod_proxy_html.so LoadModule proxy_hcheck_module modules/mod_proxy_hcheck.so LoadModule proxy_http_module modules/mod_proxy_http.so LoadModule proxy_http2_module modules/mod_proxy_http2.so LoadModule proxy_scgi_module modules/mod_proxy_scgi.so LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so LoadModule watchdog_module modules/mod_watchdog.so Thank you Krydos & wolstech sir for helping me out. Now another question, you can see all the configurations I have, can I host the application in Heliohost?
  6. Yes but the previous error which is always occurring in Firefox Console "Firefox can’t establish a connection to the server at wss://192.168.1.201/ws/." But this time another error was occurred "500 Proxy Error" and the "SSL_ERROR_RX_RECORD_TOO_LONG" error has gone but the WSS request is going through HTTPS instead of WSS. I've changed my client.js after setting up proxy. Here is the new one: var colors = [ '#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00' ]; var color_pick = Math.floor(Math.random() * colors.length); //create a new WebSocket object. var msgBox = $('#message-box'); //var wsUri = "wss://localhost/ws/"; var wsUri = "wss://192.168.1.201/ws/"; //var wsUri = "wss://192.168.1.201:9000/server.php"; websocket = new WebSocket(wsUri); websocket.readyStateChange = function (e) { // connection is open console.log(e); } websocket.onopen = function (ev) { // connection is open msgBox.append('<div class="system_msg" style="color:#bbbbbb">Welcome to my "Demo WebSocket Chat box"!</div>'); //notify user } // Message received from server websocket.onmessage = function (ev) { var response = JSON.parse(ev.data); //PHP sends Json data var res_type = response.type; //message type var user_message = response.message; //message text var user_name = response.name; //user name var user_color = response.color; //color console.log(res_type); switch (res_type) { case 'usermsg': if($("#user_typing").length > 0) $("#user_typing").remove(); msgBox.append('<div><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="user_msg">' + user_message + '</span></div>'); break; case 'system': msgBox.append('<div style="color:#bbbbbb">' + user_message + '</div>'); break; case 'notification': var user_notification = response.notification; //notification type if(user_notification === 'typing'){ if($("#user_typing").length <= 0) msgBox.append('<div id="user_typing"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>'); } else msgBox.append('<div id="user_notification"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>'); break; } msgBox[0].scrollTop = msgBox[0].scrollHeight; //scroll message }; websocket.onerror = function (e) { msgBox.append('<div class="system_error">Error Occurred - ' + e.data + '</div>'); }; websocket.onclose = function (e) { if(e.wasClean) msgBox.append('<div class="system_msg">Connection Closed</div>'); else msgBox.append('<div class="system_error">Connection Interrupted - [Error#' + e.code + '] ' + e.reason + '</div>'); }; //Message send button $('#send-message').click(function () { send_message(); }); //User hits enter key $("#message").on("keydown", function (event) { if (event.which == 13) { send_message(); } }); //User typing $("#message").on("keypress", function (event) { if (event.which !== 13) send_notification('typing','Typing...'); }); var notifications = [], isTyping = false; //Send message function send_message() { var message_input = $('#message'); //user message text var name_input = $('#name'); //user name if (message_input.val() == "") { //empty name? alert("Enter your Name please!"); return; } if (message_input.val() == "") { //emtpy message? alert("Enter Some message Please!"); return; } isTyping = false; //prepare json data var msg = { message: message_input.val(), name: name_input.val(), color: colors[color_pick] }; //convert and send data to server websocket.send(JSON.stringify(msg)); message_input.val(''); //reset message input } //Send message function send_notification(type, msg) { var name_input = $('#name'); //user name notifications.push(type); //prepare json data var msg = { notification: type, message: msg, name: name_input.val(), color: colors[color_pick] }; if(!isTyping){ isTyping = true; //convert and send data to server websocket.send(JSON.stringify(msg)); } } Here is the Virtual Host configuration: <VirtualHost _default_:443> SSLEngine on ServerName localhost:443 SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt" SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem" DocumentRoot "${SRVROOT}/htdocs" # DocumentRoot access handled globally in httpd.conf CustomLog "${SRVROOT}/logs/ssl_request.log" \"%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b" <Directory "${SRVROOT}/htdocs"> Options Indexes Includes FollowSymLinks AllowOverride AuthConfig Limit FileInfo Require all granted </Directory> SSLProxyEngine on ProxyPass /ws/ wss://localhost:9000 ProxyPassReverse /ws/ wss://localhost:9000 ProxyRequests off </VirtualHost> <VirtualHost 192.168.1.201:443> DocumentRoot "${SRVROOT}/htdocs" ServerName 192.168.1.201 SSLEngine on #SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL SSLCipherSuite ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA SSLCertificateFile "${SRVROOT}/conf/ssl/localhost.crt" SSLCertificateKeyFile "${SRVROOT}/conf/ssl/localhost.pem" SSLCertificateChainFile "${SRVROOT}/conf/ssl/ca-chain.pem" SSLProxyEngine on ProxyPass /ws/ wss://192.168.1.201:9000 ProxyPassReverse /ws/ wss://192.168.1.201:9000 ProxyRequests off ErrorLog "${SRVROOT}/logs/error.log" CustomLog "${SRVROOT}/logs/access.log" common LogLevel warn </VirtualHost>
  7. I'm using Apache HTTPD 2.4 on Windows with OpenSSL. How can I do this? I've tried mod_proxy with mod_wsproxy, it's not working.
  8. Okay the best matching cause I've found is "If you want your website to establish secure connections you must configure it to use Port 443.". But if I configure the port 9000 as HTTPS or run the web service on port 443, then web service will not be able to connect as it will go through https protocol instead of WSS.
  9. And one more thing, when I've inspected the error in the Network tab if Firefox Developer Tools, I found the error with request is showing a error code which is "ssl_error_rx_record_too_long". I've even tried to access the https with port 9000 like https://192.168.1.201:9000, the error was still shown but when accessed https with the same IP without port or with port 443 it's working fine.
  10. I can access the https without any problems but I'm getting the error when the request is sent via WSS.
  11. @Krydos, No I just had to import the CA certificate in firefox keystore from the settings screen of the firefox to make all the certificate issued by the CA to be acceptable.
  12. I'm using my own CA signed SSL for https and I'm using XCA to issue the certificates.
  13. Hi again, I'm creating a chat system with PHP. So I've created the WebSocket server in PHP and the client using the built-in browser WebSocket API. Everything is working fine when I access the client using 'http' & 'ws' protocol, but my problem is when I access the client using 'https' & 'wss', I'm getting the error in firefox saying that: "Firefox can’t establish a connection to the server at wss://192.168.1.201:9000/server.php.". The files are located on https://192.168.1.201/socket/chat2/. Here are the codes: /socket/chat2/server.php: <?php $host = '192.168.1.201'; //host $port = '9000'; //port $null = NULL; //null var //Create TCP/IP sream socket $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); if ($socket === false) { echo "socket_create() failed: reason: " . socket_strerror(socket_last_error()) . "\n"; } //reuseable port socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1); //bind socket to specified host socket_bind($socket, 0, $port); //listen to port socket_listen($socket); //create & add listning socket to the list $clients = array($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(array('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, true); //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 if(!empty($tst_msg['notification'])) $response_text = array('type'=>'notification', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color); else $response_text = array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color); $response_text = mask(json_encode($response_text)); 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(array('type'=>'system', 'message'=>$ip.' disconnected'))); send_message($response); } } } // close the listening socket socket_close($socket); 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 = array(); $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: wss://$host:$port/server.php\r\n". "Sec-WebSocket-Accept:$secAccept\r\n\r\n"; socket_write($client_conn,$upgrade,strlen($upgrade)); } ?> /socket/chat2/client.js: var colors = [ '#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00' ]; var color_pick = Math.floor(Math.random() * colors.length); //create a new WebSocket object. var msgBox = $('#message-box'); var wsUri = "wss://192.168.1.201:9000/server.php"; websocket = new WebSocket(wsUri); websocket.readyStateChange = function (e) { // connection is open console.log(e); } websocket.onopen = function (ev) { // connection is open msgBox.append('<div class="system_msg" style="color:#bbbbbb">Welcome to my "Demo WebSocket Chat box"!</div>'); //notify user } // Message received from server websocket.onmessage = function (ev) { var response = JSON.parse(ev.data); //PHP sends Json data var res_type = response.type; //message type var user_message = response.message; //message text var user_name = response.name; //user name var user_color = response.color; //color console.log(res_type); switch (res_type) { case 'usermsg': if($("#user_typing").length > 0) $("#user_typing").remove(); msgBox.append('<div><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="user_msg">' + user_message + '</span></div>'); break; case 'system': msgBox.append('<div style="color:#bbbbbb">' + user_message + '</div>'); break; case 'notification': var user_notification = response.notification; //notification type if(user_notification === 'typing'){ if($("#user_typing").length <= 0) msgBox.append('<div id="user_typing"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>'); } else msgBox.append('<div id="user_notification"><span class="user_name" style="color:' + user_color + '">' + user_name + '</span> : <span class="system_msg">' + user_message + '</span></div>'); break; } msgBox[0].scrollTop = msgBox[0].scrollHeight; //scroll message }; websocket.onerror = function (e) { msgBox.append('<div class="system_error">Error Occurred - ' + e.data + '</div>'); }; websocket.onclose = function (e) { if(e.wasClean) msgBox.append('<div class="system_msg">Connection Closed</div>'); else msgBox.append('<div class="system_error">Connection Interrupted - [Error#' + e.code + '] ' + e.reason + '</div>'); }; //Message send button $('#send-message').click(function () { send_message(); }); //User hits enter key $("#message").on("keydown", function (event) { if (event.which == 13) { send_message(); } }); //User typing $("#message").on("keypress", function (event) { if (event.which !== 13) send_notification('typing','Typing...'); }); var notifications = [], isTyping = false; //Send message function send_message() { var message_input = $('#message'); //user message text var name_input = $('#name'); //user name if (message_input.val() == "") { //empty name? alert("Enter your Name please!"); return; } if (message_input.val() == "") { //emtpy message? alert("Enter Some message Please!"); return; } isTyping = false; //prepare json data var msg = { message: message_input.val(), name: name_input.val(), color: colors[color_pick] }; //convert and send data to server websocket.send(JSON.stringify(msg)); message_input.val(''); //reset message input } //Send message function send_notification(type, msg) { var name_input = $('#name'); //user name notifications.push(type); //prepare json data var msg = { notification: type, message: msg, name: name_input.val(), color: colors[color_pick] }; if(!isTyping){ isTyping = true; //convert and send data to server websocket.send(JSON.stringify(msg)); } } /socket/chat2/index.html: <?php $colors = array('#007AFF','#FF7000','#FF7000','#15E25F','#CFC700','#CFC700','#CF1100','#CF00BE','#F00'); $color_pick = array_rand($colors); ?> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .chat-wrapper { font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif; background: #00a6bb; padding: 20px; margin: 20px auto; box-shadow: 2px 2px 2px 0px #00000017; max-width:700px; min-width:500px; } .system_error { color: #a00; } .system_msg { color: #bbb; } .user_msg { color: #00f; } #message-box { width: 97%; display: inline-block; height: 300px; background: #fff; box-shadow: inset 0px 0px 2px #00000017; overflow: auto; padding: 10px; } .user-panel{ margin-top: 10px; } input[type=text]{ border: none; padding: 5px 5px; box-shadow: 2px 2px 2px #0000001c; } input[type=text]#name{ width:20%; } input[type=text]#message{ width:60%; } button#send-message { border: none; padding: 5px 15px; background: #11e0fb; box-shadow: 2px 2px 2px #0000001c; } </style> </head> <body> <div class="chat-wrapper"> <div id="message-box"></div> <div class="user-panel"> <input type="text" name="name" id="name" placeholder="Your Name" maxlength="15" /> <input type="text" name="message" id="message" placeholder="Type your message here..." maxlength="100" /> <button id="send-message">Send</button> </div> </div> <script src="https://cdn.sgnetworks.net/jquery/lib/3.2.1/jquery-3.2.1.min.js"></script> <script language="javascript" type="text/javascript" src="client.js"></script> </body> </html>
×
×
  • Create New...