Sebelum ke pembahasan silahkan cari tau dulu konsep dari websocket itu apa supaya mengerti lebih rinci, di artikel ini saya hanya akan memberikan contoh dari websocket:
<body>
<div class="main-area" id="mainArea">
<canvas id="myCanvas" class="my-canvas">
</canvas>
</div>
<h1 class="noselect">Demo Websocket</h1>
<ol class="noselect">
<li class="noselect">Add Client (enable popup, if blocked),</li>
<li class="noselect">Draw anything on the white area,</li>
<li class="noselect">Enjoy WebSockets!</li>
</ol>
<div class="bottom-align">
<button class="noselect default" id="addButton">Add Client</button>
<button id="clearButton">Clear</button>
<div class="status noselect">WebSocket: <span id="statusMessage">Connecting...</span></div>
<div class="powered">Powered by <a href="https://wsninja.io" target="_blank">wsninja.io</a></div>
</div>
</body>
Buat extenal css dengan style seperti ini :
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
ol {
font-family: cursive;
}
button {
background: lightslategrey;
border: none;
border-radius: 5px;
padding: 5px 20px;
color: white;
float: left;
margin-right: 12px;
}
.default {
background-color: limegreen;
}
.my-canvas {
border: 1px solid #A0A0A0;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main-area {
margin: 5px;
background: white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.bottom-align {
position: fixed;
bottom: 5px;
}
.status {
float: left;
font-size: 14px;
margin-top: 4px;
}
.powered {
position: fixed;
right: 12px;
font-size: 14px;
margin-top: 3px;
}
.powered > a {
font-weight: bold;
}Buat Fungsi JavaScript
// Create WebSocket connection.
var socket = new WebSocket("wss://node2.wsninja.io");
// Connection opened, now send GUID to autenticate with server.
socket.addEventListener('open', function(event) {
socket.send(JSON.stringify({ guid: "111650ac-dbfc-4682-9e43-ec1d71c9fb2f" }));
});
var handleMessage; // WebSocket message handler
// Listen for websocket messages
socket.addEventListener('message', function(event) {
handleMessage(JSON.parse(event.data));
});
var mainArea = document.getElementById("mainArea");
var clearButton = document.getElementById("clearButton");
var addButton = document.getElementById("addButton");
var statusMessage = document.getElementById("statusMessage");
var canvas = document.getElementById("myCanvas");
canvas.width = mainArea.offsetWidth - 5;
canvas.height = mainArea.offsetHeight - 38;
var prev_pos;
var drawing = false;
var ctx = canvas.getContext("2d");
// Check the socket state and update status field accordingly.
setInterval(function() {
if (socket.readyState === 0) statusMessage.textContent = "Connecting...";
if (socket.readyState === 1) statusMessage.textContent = "Connected";
if (socket.readyState === 2) statusMessage.textContent = "Closing...";
if (socket.readyState === 3) statusMessage.textContent = "Disconnected";
}, 1000);
function moveTo(pos) {
prev_pos = pos;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
drawing = true;
}
function lineTo(pos) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
prev_pos = pos;
}
function cutOff() {
drawing = false;
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function startDraw(e) {
var pos = getMousePos(canvas, e);
moveTo(pos);
socket.send(JSON.stringify( { method: "move-to", pos: pos, size: {w: canvas.width, h: canvas.height} } ));
}
function stopDraw(e) {
cutOff();
socket.send(JSON.stringify( { method: "cut-off" } ));
}
function draw(e) {
if (!drawing) return;
var pos = getMousePos(canvas, e);
if (pos.x !== prev_pos.x || pos.y !== prev_pos.y) {
lineTo(pos);
socket.send(JSON.stringify( { method: "line-to", pos: pos } ));
}
}
function clearAll() {
clear();
socket.send(JSON.stringify( { method: "clear" } ));
}
function handleMessage(message) {
if (message.method === "move-to") {
moveTo(message.pos);
}
if (message.method === "line-to") {
lineTo(message.pos);
}
if (message.method === "cut-off") {
cutOff();
}
if (message.method === "clear") {
clear();
}
}
function getMousePos(c, evt) {
var rect = c.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function addClient() {
window.open(
'https://jsfiddle.net/mmalex/g13e4yt6/show',
'MsgWindow_' + Date.now(),
'left=0,top=0,width=' + mainArea.offsetWidth + ',height=' + mainArea.offsetHeight);
}
window.addEventListener('mousedown', startDraw, false);
window.addEventListener('mouseup', stopDraw, false);
window.addEventListener('mousemove', draw, false);
clearButton.addEventListener('click', clearAll, false);
addButton.addEventListener('click', addClient, false);
Untuk server websocket menggunakan server wsninja.io adapun reference artikel ada di StackOverFlow dan juga untuk demonya bisa di akses di sini . Semoga bermanfaat dan tambah paham dengan membaca artikel di atas.
Comments