Client(JS-Browser) and Server(PHP) communication over IP through Web-Socket

Question

I am new to web-sockets. I am trying to establish communication between client and server through web-socket. I follow the code from this link:

https://phppot.com/php/simple-php-chat-using-websocket/

Here is my try:

1. Client JS side:

var ws = new WebSocket("ws://myIp:8090");

2. Server PHP side:

define('HOST_NAME',"myIP");
define('PORT',"8090");

Now in the browser when I go for,

1. http://localhost:8090 : The initial handshake Request Headers in browser:

Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9 Cache-Control: no-cache Connection: Upgrade Host: myIP:8090 Origin: http://localhost:8090 Pragma: no-cache Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits Sec-WebSocket-Key: tJ0fWdCEfJCUcmtRCNOJuQ== Sec-WebSocket-Version: 13 Upgrade: websocket User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

And Response headers in PHP Server is:

HTTP/1.1 101 Web Socket Protocol Handshake Upgrade: websocket Connection: Upgrade WebSocket-Origin: myIP WebSocket-Location: ws://myIP:8090/demo/shout.php Sec-WebSocket-Accept:DqaK+Z+jqf1lJ0vj5bIxFi7+EPc=

As in above both request and response headers upgrade their protocol to web-socket and communication establish successfully.

2. http://myIP:8090 :

Request Headers are in browser:

Provisional headers are shown Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9 Cache-Control: no-cache Connection: Upgrade Host: myIP:8090 Origin: http://myIP:8090 Pragma: no-cache Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits Sec-WebSocket-Key: D73LNcTLB8P6dzPilGipQQ== Sec-WebSocket-Version: 13 Upgrade: websocket User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

but the PHP server receives the Request Headers are:

GET / HTTP/1.1 Host: localhost:8090 Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng, / ;q=0.8,application/signed-exchange;v=b3;q=0.9 Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9 If-None-Match: W/"41e-5e6jpMk0FNkw+DjhkfcoeaiAhE4"

As seen above the PHP Server does not receive the web-socket upgrade headers sent by the browser. So the server does not receive any Sec-WebSocket-Key in request headers and got this error:

ErrorException: Undefined index: Sec-WebSocket-Key

while creating the response headers. I dont know how this can be tackled? How does the Request Headers are getting modified? Have I done something wrong in the setup? And can this setup work to establish the communication on two different PC's? Please Help. Thanks in Advance!

Answer 1

After some try here and there I found the way to communicate through Web-sockets in the same or different PC's.

1. If the server and Client are in the same PC: The case 1 will be worked from the above question.
2. If the server and client are in the different PC's: In the Client(JS) side set the IP address to the Server PC IP will work.

Client JS side:

var ws = new WebSocket("ws://Server_PC_IP:8090");