[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 chat.png
avatar ardyhim

Ditanyakan oleh @ardyhim

289 Kontribusi 172 Poin

Login untuk menanggapi


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!
avatar satyakresna

Dijawab oleh @satyakresna

82 Kontribusi 54 Poin

Login untuk menanggapi


[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!
avatar satyakresna

Dijawab oleh @satyakresna

82 Kontribusi 54 Poin

Login untuk menanggapi


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
avatar ardyhim

Dijawab oleh @ardyhim

289 Kontribusi 172 Poin

Login untuk menanggapi


om kalo bikkin nya pake php gimana yah?? mohon ada tutorialnya
avatar azis

Dijawab oleh @azis

4 Kontribusi 1 Poin

Login untuk menanggapi


kurang tau saya kalau pakai php
avatar ardyhim

Dijawab oleh @ardyhim

289 Kontribusi 172 Poin

Login untuk menanggapi


sip sip sip
avatar superadmin

Dijawab oleh @superadmin

0 Kontribusi 0 Poin

Login untuk menanggapi


Om bikin tutorial pake video aja, biar makin gampang dipahami, thx
avatar yuutech01

Dijawab oleh @yuutech01

0 Kontribusi 0 Poin

Login untuk menanggapi


pala pusing pala pusing hehhehe, bookmark dulu mas :D
avatar zapzipzupzepzop

Dijawab oleh @zapzipzupzepzop

140 Kontribusi 137 Poin

Login untuk menanggapi


Login untuk gabung berdiskusi