Tweet
The connection is maintained unless it is actively closed or there is a network error.
Creating WebSocket Connection
Server Side
Server side code is PHPoC code, and it is run in system loop.
PHP Code:
<?php
include "/lib/sn_tcp_ws.php";
ws_setup(0, "path_name", "protocol_name");
?>
Client Side
Client code is JavaScript code and it's run on Client (e.g. Web Browser). It is embedded into webpage, which includes HTML, CSS codes.
Code:
<script>
var ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/path_name", "protocol_name");
</script>
Let's look at above code, We can see a line that contains a piece of PHPoC code. When web browser makes HTTP request to this webpage, this PHPoC code is interpret on server before return to web browser.
Note that: path_name and protocol_name must be the same between Client and Server.
Exchanging Data via WebSocket Connection
Server receives data from client
PHP Code:
$msg= "";
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $msg);
if($rlen)
{
//process message here
}
}
Server sends data to client
PHP Code:
$msg= "Hello Client, How are you?\r\n";
if(ws_state(0) == TCP_CONNECTED)
{
ws_write(0, $msg);
}
Client sends data to server
Code:
var msg = "Hello Sever, How are you?\r\n"
if(ws.readyState == 1)
ws.send(msg);
Client receives data from server
Code:
ws.onmessage = ws_onmessage;
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
var msg = e_msg.data;
// process message here
}
Additional Function
Server Side
Client Side
- Client actively closes WebSocket Connection.
Code:
ws.close();
- Event handler when WebSocket: is opened, is closed or get error, respectively
Code:
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "OPEN" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
Examples Code
In the following example, when WebSocket connection is established, Client sends message with number 1 to server. When server receives the message, it increases by on and send back to client. When client receives the message, it increases by one and send back to server. This process is repeated infinitely.
Server Side Code (task0.php)
PHP Code:
<?php
if(_SERVER("REQUEST_METHOD"))
exit; // avoid php execution via http request
include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";
ws_setup(0, "WebConsole", "text.phpoc");
$rwbuf = "";
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $rwbuf);
if($rlen)
{
echo $rwbuf;
$send_back = (int)$rwbuf + 1;
ws_write(0, "$send_back\r\n");
}
sleep(1);
}
}
?>
Client Side Code (index.PHP)
Code:
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align:center; }
textarea { width:400px; height:400px; padding:10px; font-family:courier; font-size:14px; }
</style>
<script>
var ws;
var wc_max_len = 32768;
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "OPEN";
document.getElementById("wc_conn").innerHTML = "Disconnect";
ws.send("1\r\n");
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "CLOSED";
document.getElementById("wc_conn").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function wc_onclick()
{
if(ws == null)
{
ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/WebConsole", "text.phpoc");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
var wc_text = document.getElementById("wc_text");
var len = wc_text.value.length;
if(len > (wc_max_len + wc_max_len / 10))
wc_text.innerHTML = wc_text.value.substring(wc_max_len / 10);
wc_text.scrollTop = wc_text.scrollHeight;
wc_text.innerHTML += e_msg.data;
var send_back = Number(e_msg.data) + 1;
ws.send(send_back + "\r\n");
}
function wc_clear()
{
document.getElementById("wc_text").innerHTML = "";
}
</script>
</head>
<body>
<h2>
<p>
Web Console : <span id="ws_state">CLOSED</span><br>
</p>
<textarea id="wc_text" readonly="readonly"></textarea><br>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<button id="wc_clear" type="button" onclick="wc_clear();">Clear</button>
</h2>
</body>
</html>
Demonstration
See Also
Server sends data to client
PHP Code:
$msg= "";
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $msg);
if($rlen)
{
//process message here
}
}
Server receives data from client
PHP Code:
$msg= "Hello Client, How are you?\r\n";
if(ws_state(0) == TCP_CONNECTED)
{
ws_write(0, $msg);
}
I think the reason is the exchanged headings !
Thank you for pointing out the mistake.
We corrected it!