Membuat aplikasi chat dengan nodejs, express, socket.io

March 1, 2016

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

{
  "<span class="hljs-attribute">name</span>": <span class="hljs-value"><span class="hljs-string">"chat"</span></span>,
  "<span class="hljs-attribute">version</span>": <span class="hljs-value"><span class="hljs-string">"0.0.1"</span></span>,
  "<span class="hljs-attribute">private</span>": <span class="hljs-value"><span class="hljs-literal">true</span></span>,
  "<span class="hljs-attribute">scripts</span>": <span class="hljs-value">{
    "<span class="hljs-attribute">start</span>": <span class="hljs-value"><span class="hljs-string">"node ./bin/www"</span>
  </span>}</span>,
  "<span class="hljs-attribute">dependencies</span>": <span class="hljs-value">{
    "<span class="hljs-attribute">body-parser</span>": <span class="hljs-value"><span class="hljs-string">"~1.13.2"</span></span>,
    "<span class="hljs-attribute">cookie-parser</span>": <span class="hljs-value"><span class="hljs-string">"~1.3.5"</span></span>,
    "<span class="hljs-attribute">debug</span>": <span class="hljs-value"><span class="hljs-string">"~2.2.0"</span></span>,
    "<span class="hljs-attribute">express</span>": <span class="hljs-value"><span class="hljs-string">"~4.13.1"</span></span>,
    "<span class="hljs-attribute">ejs</span>": <span class="hljs-value"><span class="hljs-string">"*"</span></span>,
    "<span class="hljs-attribute">morgan</span>": <span class="hljs-value"><span class="hljs-string">"~1.6.1"</span></span>,
    "<span class="hljs-attribute">serve-favicon</span>": <span class="hljs-value"><span class="hljs-string">"~2.3.0"</span></span>,
    "<span class="hljs-attribute">socket.io</span>": <span class="hljs-value"><span class="hljs-string">"*"</span></span>,
    "<span class="hljs-attribute">linkifyjs</span>": <span class="hljs-value"><span class="hljs-string">"*"</span>
  </span>}
</span>}

{

"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

<span class="hljs-keyword">var</span> server = http.createServer(app);

<span class="hljs-comment">/**
 * Attach socket.io
 */</span>
app.io.attach(server);

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 = <span class="hljs-keyword">require</span>(<span class="hljs-string">'express'</span>)
app.io = <span class="hljs-keyword">require</span>(<span class="hljs-string">'socket.io'</span>)();
<span class="hljs-regexp">//</span> kode ke dua ganti app.set(<span class="hljs-string">'view engine'</span>, <span class="hljs-string">'jade'</span>); dengan
app.set(<span class="hljs-string">'view engine'</span>, <span class="hljs-string">'ejs'</span>);
<span class="hljs-regexp">//</span> kode ke tiga di bawah app.<span class="hljs-keyword">use</span>(<span class="hljs-string">'/'</span>,routes);
app.<span class="hljs-keyword">use</span>(<span class="hljs-string">'/socket'</span>, <span class="hljs-keyword">socket</span>.router);
<span class="hljs-regexp">//</span> kode ke emopat taruh di atas module.exports = app;
<span class="hljs-keyword">socket</span>.sck(app.io);

//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 github.com/ardyhim/chat/blob/master/app.js setelah itu bikin file socket.js di folder routes dan isikan dengan

<span class="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);
<span class="hljs-keyword">var</span> router = express.Router();
<span class="hljs-keyword">var</span> linkifyHtml = <span class="hljs-built_in">require</span>(<span class="hljs-string">'linkifyjs/html'</span>);
<span class="hljs-keyword">var</span> linkifyStr = <span class="hljs-built_in">require</span>(<span class="hljs-string">'linkifyjs/string'</span>);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">socket</span>(<span class="hljs-params">io</span>) </span>{
  <span class="hljs-comment">// start listen with socket.io</span>
  io.on(<span class="hljs-string">'connection'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">socket</span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'a user connected'</span>);
    socket.on(<span class="hljs-string">'new message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">msg</span>)</span>{
      <span class="hljs-keyword">var</span> options = {<span class="hljs-comment">/* … */</span>};
      <span class="hljs-keyword">var</span> data = {
        nama: linkifyStr(msg.nama, options),
        message: linkifyStr(msg.message, options)
      }
      io.emit(<span class="hljs-string">'chat message'</span>, data);
    });
  });
  <span class="hljs-comment">/* GET home page. */</span>
  router.get(<span class="hljs-string">'/home'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req, res, next</span>) </span>{
    res.render(<span class="hljs-string">'index'</span>, { title: <span class="hljs-string">'Express socket'</span> });
  });
}
<span class="hljs-built_in">module</span>.exports = {
  router: router,
  sck: socket
}

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 github.com/ardyhim/chat/blob/master/routes/socket.js setelah itu buat file index.ejs di bagian views, dan isikan kode ini

<span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">%=</span> <span class="hljs-attribute">title</span> %&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/socket.io/socket.io.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/css/bootstrap.min.css"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/css/style.css"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/jquery-2.1.4.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/bootstrap.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
      <span class="hljs-keyword">var</span> socket = io();

      $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{

        $(<span class="hljs-string">'.btn-chat'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
          <span class="hljs-keyword">var</span> data = {
            nama: $(<span class="hljs-string">'#nama'</span>).val(),
            message: $(<span class="hljs-string">'.text-chat'</span>).val()
          }
          <span class="hljs-keyword">if</span> ($(<span class="hljs-string">'#nama'</span>).val() == <span class="hljs-string">''</span>) {
             $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid red'</span>);
          } <span class="hljs-keyword">else</span> {
             $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid #ccc;'</span>);
             kirim_pesan(data);
             $(<span class="hljs-string">'.text-chat'</span>).val(<span class="hljs-string">''</span>);
          }
        });

        $( <span class="hljs-string">".text-chat"</span> ).keypress(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{
          <span class="hljs-keyword">if</span> ( event.which == <span class="hljs-number">13</span> ) {
            <span class="hljs-keyword">var</span> data = {
              nama: $(<span class="hljs-string">'#nama'</span>).val(),
              message: $(<span class="hljs-string">'.text-chat'</span>).val()
            }
            <span class="hljs-keyword">if</span> ($(<span class="hljs-string">'#nama'</span>).val() == <span class="hljs-string">''</span>) {
               $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid red'</span>);
            } <span class="hljs-keyword">else</span> {
               $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid #ccc;'</span>);
               kirim_pesan(data);
               $(<span class="hljs-string">'.text-chat'</span>).val(<span class="hljs-string">''</span>);
            }
          }
        });

      });
    </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/main.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container-fluid"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-light bg-faded"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item active"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-link"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Home <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>&gt;</span>(current)<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"nama"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"nama"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">nav</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-lg-8"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"chat"</span>&gt;</span>

        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-inline"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-title">textarea</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"name"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-chat"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">textarea</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"buttom"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary btn-chat"</span>&gt;</span>SEND !!<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span>

<!DOCTYPE html>

<html>

<head>

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>

</head>

<body>

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

</li>

</ul>

</nav>

</div>

</div>

</div>

</body>

</html>

dan ini untuk main.js yang di taruh di folder public/js

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kirim_pesan</span>(<span class="hljs-params">pesan</span>) </span>{
  socket.emit(<span class="hljs-string">'new message'</span>, pesan);
}
socket.on(<span class="hljs-string">'chat message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">msg</span>)</span>{
  $(<span class="hljs-string">'.chat'</span>).append(<span class="hljs-string">'&lt;li&gt;'</span>+<span class="hljs-string">'&lt;div style="color:#e74c3c;float:left"&gt;'</span>+msg.nama+<span class="hljs-string">'&lt;/div&gt;'</span>+<span class="hljs-string">': '</span>+msg.message+<span class="hljs-string">'&lt;/li&gt;'</span>);
  $(<span class="hljs-string">'.chat'</span>).scrollTop($(<span class="hljs-string">'.chat'</span>)[<span class="hljs-number">0</span>].scrollHeight);
})

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 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– See more at: https://sekolahkoding.com/perpustakaan/Membuat-aplikasi-chat-dengan-nodejs-express-socketio#sthash.ZmfuZPX8.dpuf[:de]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

{
  "<span class="hljs-attribute">name</span>": <span class="hljs-value"><span class="hljs-string">"chat"</span></span>,
  "<span class="hljs-attribute">version</span>": <span class="hljs-value"><span class="hljs-string">"0.0.1"</span></span>,
  "<span class="hljs-attribute">private</span>": <span class="hljs-value"><span class="hljs-literal">true</span></span>,
  "<span class="hljs-attribute">scripts</span>": <span class="hljs-value">{
    "<span class="hljs-attribute">start</span>": <span class="hljs-value"><span class="hljs-string">"node ./bin/www"</span>
  </span>}</span>,
  "<span class="hljs-attribute">dependencies</span>": <span class="hljs-value">{
    "<span class="hljs-attribute">body-parser</span>": <span class="hljs-value"><span class="hljs-string">"~1.13.2"</span></span>,
    "<span class="hljs-attribute">cookie-parser</span>": <span class="hljs-value"><span class="hljs-string">"~1.3.5"</span></span>,
    "<span class="hljs-attribute">debug</span>": <span class="hljs-value"><span class="hljs-string">"~2.2.0"</span></span>,
    "<span class="hljs-attribute">express</span>": <span class="hljs-value"><span class="hljs-string">"~4.13.1"</span></span>,
    "<span class="hljs-attribute">ejs</span>": <span class="hljs-value"><span class="hljs-string">"*"</span></span>,
    "<span class="hljs-attribute">morgan</span>": <span class="hljs-value"><span class="hljs-string">"~1.6.1"</span></span>,
    "<span class="hljs-attribute">serve-favicon</span>": <span class="hljs-value"><span class="hljs-string">"~2.3.0"</span></span>,
    "<span class="hljs-attribute">socket.io</span>": <span class="hljs-value"><span class="hljs-string">"*"</span></span>,
    "<span class="hljs-attribute">linkifyjs</span>": <span class="hljs-value"><span class="hljs-string">"*"</span>
  </span>}
</span>}

{

"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

<span class="hljs-keyword">var</span> server = http.createServer(app);

<span class="hljs-comment">/**
 * Attach socket.io
 */</span>
app.io.attach(server);

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 = <span class="hljs-keyword">require</span>(<span class="hljs-string">'express'</span>)
app.io = <span class="hljs-keyword">require</span>(<span class="hljs-string">'socket.io'</span>)();
<span class="hljs-regexp">//</span> kode ke dua ganti app.set(<span class="hljs-string">'view engine'</span>, <span class="hljs-string">'jade'</span>); dengan
app.set(<span class="hljs-string">'view engine'</span>, <span class="hljs-string">'ejs'</span>);
<span class="hljs-regexp">//</span> kode ke tiga di bawah app.<span class="hljs-keyword">use</span>(<span class="hljs-string">'/'</span>,routes);
app.<span class="hljs-keyword">use</span>(<span class="hljs-string">'/socket'</span>, <span class="hljs-keyword">socket</span>.router);
<span class="hljs-regexp">//</span> kode ke emopat taruh di atas module.exports = app;
<span class="hljs-keyword">socket</span>.sck(app.io);

//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 github.com/ardyhim/chat/blob/master/app.js setelah itu bikin file socket.js di folder routes dan isikan dengan

<span class="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);
<span class="hljs-keyword">var</span> router = express.Router();
<span class="hljs-keyword">var</span> linkifyHtml = <span class="hljs-built_in">require</span>(<span class="hljs-string">'linkifyjs/html'</span>);
<span class="hljs-keyword">var</span> linkifyStr = <span class="hljs-built_in">require</span>(<span class="hljs-string">'linkifyjs/string'</span>);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">socket</span>(<span class="hljs-params">io</span>) </span>{
  <span class="hljs-comment">// start listen with socket.io</span>
  io.on(<span class="hljs-string">'connection'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">socket</span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'a user connected'</span>);
    socket.on(<span class="hljs-string">'new message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">msg</span>)</span>{
      <span class="hljs-keyword">var</span> options = {<span class="hljs-comment">/* … */</span>};
      <span class="hljs-keyword">var</span> data = {
        nama: linkifyStr(msg.nama, options),
        message: linkifyStr(msg.message, options)
      }
      io.emit(<span class="hljs-string">'chat message'</span>, data);
    });
  });
  <span class="hljs-comment">/* GET home page. */</span>
  router.get(<span class="hljs-string">'/home'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req, res, next</span>) </span>{
    res.render(<span class="hljs-string">'index'</span>, { title: <span class="hljs-string">'Express socket'</span> });
  });
}
<span class="hljs-built_in">module</span>.exports = {
  router: router,
  sck: socket
}

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 github.com/ardyhim/chat/blob/master/routes/socket.js setelah itu buat file index.ejs di bagian views, dan isikan kode ini

<span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">%=</span> <span class="hljs-attribute">title</span> %&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/socket.io/socket.io.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/css/bootstrap.min.css"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/css/style.css"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/jquery-2.1.4.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/bootstrap.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
      <span class="hljs-keyword">var</span> socket = io();

      $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{

        $(<span class="hljs-string">'.btn-chat'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
          <span class="hljs-keyword">var</span> data = {
            nama: $(<span class="hljs-string">'#nama'</span>).val(),
            message: $(<span class="hljs-string">'.text-chat'</span>).val()
          }
          <span class="hljs-keyword">if</span> ($(<span class="hljs-string">'#nama'</span>).val() == <span class="hljs-string">''</span>) {
             $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid red'</span>);
          } <span class="hljs-keyword">else</span> {
             $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid #ccc;'</span>);
             kirim_pesan(data);
             $(<span class="hljs-string">'.text-chat'</span>).val(<span class="hljs-string">''</span>);
          }
        });

        $( <span class="hljs-string">".text-chat"</span> ).keypress(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{
          <span class="hljs-keyword">if</span> ( event.which == <span class="hljs-number">13</span> ) {
            <span class="hljs-keyword">var</span> data = {
              nama: $(<span class="hljs-string">'#nama'</span>).val(),
              message: $(<span class="hljs-string">'.text-chat'</span>).val()
            }
            <span class="hljs-keyword">if</span> ($(<span class="hljs-string">'#nama'</span>).val() == <span class="hljs-string">''</span>) {
               $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid red'</span>);
            } <span class="hljs-keyword">else</span> {
               $(<span class="hljs-string">'#nama'</span>).css(<span class="hljs-string">'border'</span>, <span class="hljs-string">'1px solid #ccc;'</span>);
               kirim_pesan(data);
               $(<span class="hljs-string">'.text-chat'</span>).val(<span class="hljs-string">''</span>);
            }
          }
        });

      });
    </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/main.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container-fluid"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-light bg-faded"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item active"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-link"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>Home <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>&gt;</span>(current)<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"nama"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"nama"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">nav</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-lg-8"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"chat"</span>&gt;</span>

        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-inline"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-title">textarea</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"name"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-chat"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">textarea</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"buttom"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary btn-chat"</span>&gt;</span>SEND !!<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span>

<!DOCTYPE html>

<html>

<head>

var socket = io();

$(document).ready(function() {

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>

</head>

<body>

</li>

</li>

</ul>

</nav>

</div>

</div>

</body>

</html>

dan ini untuk main.js yang di taruh di folder public/js

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kirim_pesan</span>(<span class="hljs-params">pesan</span>) </span>{
  socket.emit(<span class="hljs-string">'new message'</span>, pesan);
}
socket.on(<span class="hljs-string">'chat message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">msg</span>)</span>{
  $(<span class="hljs-string">'.chat'</span>).append(<span class="hljs-string">'&lt;li&gt;'</span>+<span class="hljs-string">'&lt;div style="color:#e74c3c;float:left"&gt;'</span>+msg.nama+<span class="hljs-string">'&lt;/div&gt;'</span>+<span class="hljs-string">': '</span>+msg.message+<span class="hljs-string">'&lt;/li&gt;'</span>);
  $(<span class="hljs-string">'.chat'</span>).scrollTop($(<span class="hljs-string">'.chat'</span>)[<span class="hljs-number">0</span>].scrollHeight);
})

function kirim_pesan(pesan) {

socket.emit('new message', pesan);

}

socket.on('chat message', function(msg){

$('.chat').scrollTop($('.chat')[0].scrollHeight);

})

Membuat aplikasi chat dengan nodejs, express, socket.io

WhatsApp Kami di 087809176282

Fahmi Nugraha

Membuat aplikasi chat dengan nodejs, express, socket.io

Baca Artiker menarik lain nya

WhatsApp Kami di 087809176282

Fahmi Nugraha