Postingan lainnya
[EDIT] Membuat aplikasi chat dengan nodejs, express, socket.io
Pertama kamu harus install express generator dengan cara npm install -g express-generator dan express namaproject setelah itu masuk folder namaproject kita dan edit bagian package.json dan ganti semua dengan ini
{
"name": "chat",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"ejs": "*",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"socket.io": "*",
"linkifyjs": "*"
}
}
setelah itu ketik npm install di terminal atau cmd kalian habis itu buka bagian bin/www dan masukan kode
var server = http.createServer(app);
/**
* Attach socket.io
*/
app.io.attach(server);
ini di bawah app.set('port', port); setelah itu buka app.js dan masukan berapa kode ini
//kode pertama di bawah var app = require('express')
app.io = require('socket.io')();
// kode ke dua ganti app.set('view engine', 'jade'); dengan
app.set('view engine', 'ejs');
// kode ke tiga di bawah app.use('/',routes);
app.use('/socket', socket.router);
// kode ke emopat taruh di atas module.exports = app;
socket.sck(app.io);
liad secara utuh nya disini <a href='https://github.com/ardyhim/chat/blob/master/app.js'>https://github.com/ardyhim/chat/blob/master/app.js</a> setelah itu bikin file socket.js di folder routes dan isikan dengan
var express = require('express');
var router = express.Router();
var linkifyHtml = require('linkifyjs/html');
var linkifyStr = require('linkifyjs/string');
function socket(io) {
// start listen with socket.io
io.on('connection', function(socket){
console.log('a user connected');
socket.on('new message', function(msg){
var options = {/* … */};
var data = {
nama: linkifyStr(msg.nama, options),
message: linkifyStr(msg.message, options)
}
io.emit('chat message', data);
});
});
/* GET home page. */
router.get('/home', function(req, res, next) {
res.render('index', { title: 'Express socket' });
});
}
module.exports = {
router: router,
sck: socket
}
ini kode lengkap nya <a href='https://github.com/ardyhim/chat/blob/master/routes/socket.js'>https://github.com/ardyhim/chat/blob/master/routes/socket.js</a> setelah itu buat file index.ejs di bagian views, dan isikan kode ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/jquery-2.1.4.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
var socket = io();
$(document).ready(function() {
$('.btn-chat').on('click', function(event) {
var data = {
nama: $('#nama').val(),
message: $('.text-chat').val()
}
if ($('#nama').val() == '') {
$('#nama').css('border', '1px solid red');
} else {
$('#nama').css('border', '1px solid #ccc;');
kirim_pesan(data);
$('.text-chat').val('');
}
});
$( ".text-chat" ).keypress(function( event ) {
if ( event.which == 13 ) {
var data = {
nama: $('#nama').val(),
message: $('.text-chat').val()
}
if ($('#nama').val() == '') {
$('#nama').css('border', '1px solid red');
} else {
$('#nama').css('border', '1px solid #ccc;');
kirim_pesan(data);
$('.text-chat').val('');
}
}
});
});
</script>
<script src="/js/main.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<input class="form-control" id="nama" type="text" placeholder="nama">
</li>
</ul>
</nav>
<div class="col-lg-8">
<div class="chat">
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group">
<textarea name="name" class="text-chat"></textarea>
</div>
</div>
<button type="buttom" class="btn btn-primary btn-chat">SEND !!</button>
</div>
</div>
</div>
</body>
</html>
dan ini untuk main.js yang di taruh di folder public/js
function kirim_pesan(pesan) {
socket.emit('new message', pesan);
}
socket.on('chat message', function(msg){
$('.chat').append('<li>'+'<div style="color:#e74c3c;float:left">'+msg.nama+'</div>'+': '+msg.message+'</li>');
$('.chat').scrollTop($('.chat')[0].scrollHeight);
})
ini kode lengkap nya <a href='https://github.com/ardyhim/chat/blob/master/views/index.ejs'>https://github.com/ardyhim/chat/blob/master/views/index.ejs</a>
pastikan di bagian folder public/js udah ada bootstrap.min.js bootstrap.min.css dan jquery-2.1.4.js
15 Jawaban:
Pagi gan, saya mau tanya lokasi direktori bin/www itu di mana ya? Saya telah mengikuti step - step ini: 1. Menginstall express generator (done) 2. Mengedit bagian package.json. Saya membuat file package.json di C:\Users\namapengguna, karena kalau saya membuat nya di dalam express generator rasanya mustahil melakukan step ketiga. Hehehe. 3. Melakukan npm install (done) 4. Saya bingung di mana direktori bin/www itu berada.
Mohon petunjuknya gan. Trima kasih!
[SOLVE]
Ternyata saya belum memasukkan perintah express chat. Hehehe. Saya melihat petunjuk di perpustakaan yang pernah mas buat sebelumnya tentang membuat api pegawai menggunakan node js dan mongo. Trima kasih!
oh iya lupa nerangin untuk membuat file json nya :D gak usah buat file nya secara manual. kita buat dengan cara ketik express namaproject setelah itu baru kita edit file package.json yg udah kita buat dengan cara express namaproject untuk melihat struktur folder nya bisa di liad di github mas. link nya ada di atas
om kalo bikkin nya pake php gimana yah?? mohon ada tutorialnya
Om bikin tutorial pake video aja, biar makin gampang dipahami, thx
pala pusing pala pusing hehhehe, bookmark dulu mas :D
saya juga pusing mas waktu pertama belajar :D
mas, ini run file nya gimana ya ? baru belajar node js hehe
kk mau nanya, kalo cara koneksi dengan database gimana ya, ada gak tutorial nya? saya udah nyark refrensi gaj ketemu kk, terimakasih kk sebelumbya
kk mau nanya, kalo cara koneksi dengan database gimana ya, ada gak tutorial nya? saya udah nyark refrensi gaj ketemu kk, terimakasih kk sebelumnya
kalau saya untuk nodejs biasanya pakai mongodb dan pakcage nya mongoose
gan kalau bikin whispernya gimana? hanya orang yg di pilih yg dikirim pesan?
seperti live shat di ecommerce
