Daftar dan Belajar Sekarang!

[EDIT] Membuat aplikasi chat dengan nodejs, express, socket.io

foto ardyhim
289 Kontribusi 172 Coto
4 tahun yang lalu
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 https://github.com/ardyhim/chat/blob/master/app.js 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 https://github.com/ardyhim/chat/blob/master/routes/socket.js 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 https://github.com/ardyhim/chat/blob/master/views/index.ejs pastikan di bagian folder public/js udah ada bootstrap.min.js bootstrap.min.css dan jquery-2.1.4.js https://skspace.sgp1.digitaloceanspaces.com/forums/images/chat.png

Jawaban
foto satyakresna
82 Kontribusi 54 Coto
4 tahun yang lalu
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!

foto satyakresna
82 Kontribusi 54 Coto
4 tahun yang lalu
[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!

foto ardyhim
289 Kontribusi 172 Coto
4 tahun yang lalu
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

foto azis
4 Kontribusi 1 Coto
4 tahun yang lalu
om kalo bikkin nya pake php gimana yah?? mohon ada tutorialnya

foto ardyhim
289 Kontribusi 172 Coto
4 tahun yang lalu
kurang tau saya kalau pakai php

foto superadmin
0 Kontribusi 0 Coto
4 tahun yang lalu
sip sip sip

foto yuutech01
0 Kontribusi 0 Coto
4 tahun yang lalu
Om bikin tutorial pake video aja, biar makin gampang dipahami, thx

foto zapzipzupzepzop
140 Kontribusi 137 Coto
3 tahun yang lalu
pala pusing pala pusing hehhehe, bookmark dulu mas :D


Login untuk diksusi di forum sekolah koding