Assalamu Alaikum
kali ini admin akan mengshare seputar cara membuat aplikasi sederhana dengan websocket+node.js
dengan meggunakan html tentunya. ok silahkan di simak.
1. buat folder dengan nama chatapp atau terserah
2. buka folder menggunakan terminal dan Node.js harus terinstall di komputer teman-teman contoh :
C:\Desktop\chatapp\
3. kemudian teman-teman harus terkoneksi ke internet masih di dalam terminal C:\Desktop\chatapp\npm install ws --save
perintah npm ini untuk mendownload module websocket di internet
4. buat file index.html,ws.js,ws-client.js
a. buat index.htmlnya terlebih dahulu :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title>Websocket</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Websocket</h1>
<div class="messages"></div>
<form action="javascript:void(0)">
<label for="message">></label>
<input type="text" id="message" required autofocus />
</form>
<script src="ws-client.js"></script>
</body>
</html>
b. buat file ws.js-nya :
var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({ port:3000 });
wss.on("connection", function(ws) {
ws.on("message", function(message){
if (message === 'exit'){
ws.close();
} else {
wss.clients.forEach(function(client) {
client.send(message);
});
}
});
ws.send("Welcome to cyber chat");
});
3. buat file ws-client-nya :
var ws = new WebSocket("ws://localhost:3000"); //sensitive case nama harus sesuai dengan module
ws.onopen = function(){
setTitle("terhubung dengan chat");
};
ws.onclose = function(){
setTitle("batal");
};
ws.onmessage = function(payload){
printMessage(payload.data);
};
document.forms[0].onsubmit = function () {
var input = document.getElementById('message');
ws.send(input.value);
input.value = '';
};
function setTitle(title){
document.querySelector('h1').innerHTML = title;
}
function printMessage(message){
var p = document.createElement('p');
p.innerText = message;
document.querySelector('div.messages').appendChild(p);
}
setelah semua selesai untuk menjalankannya masuk di terminal C:\Desktop\chatapp\ kemudian ketik node ws
C:\Desktop\chatapp\node ws
setelah server jalan klik 2x index.html
selamat mencoba
0 comments:
Post a Comment