Leave a reply
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "<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>} |
setelah itu ketik npm install di terminal atau cmd kalian habis itu buka bagian bin/www dan masukan kode
|
1 2 3 4 5 6 |
<span class="hljs-keyword">var</span> server = http.createServer(app); <span class="hljs-comment">/** * Attach socket.io */</span> app.io.attach(server); |
ini di bawah app.set(‘port’, port); setelah itu buka app.js dan masukan berapa kode ini
|
1 2 3 4 5 6 7 8 |
//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); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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 } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"><<span class="hljs-title">%=</span> <span class="hljs-attribute">title</span> %></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/socket.io/socket.io.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<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>></span> <span class="hljs-tag"><<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>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/jquery-2.1.4.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/bootstrap.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span>></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"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/main.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container-fluid"</span>></span> <span class="hljs-tag"><<span class="hljs-title">nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-light bg-faded"</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item active"</span>></span> <span class="hljs-tag"><<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>></span>Home <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>></span>(current)<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item"</span>></span> <span class="hljs-tag"><<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>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-tag"></<span class="hljs-title">nav</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-lg-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"chat"</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-inline"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>></span> <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<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>></span>SEND !!<span class="hljs-tag"></<span class="hljs-title">button</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span> |
dan ini untuk main.js yang di taruh di folder public/js
|
1 2 3 4 5 6 7 8 |
<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">'<li>'</span>+<span class="hljs-string">'<div style="color:#e74c3c;float:left">'</span>+msg.nama+<span class="hljs-string">'</div>'</span>+<span class="hljs-string">': '</span>+msg.message+<span class="hljs-string">'</li>'</span>); $(<span class="hljs-string">'.chat'</span>).scrollTop($(<span class="hljs-string">'.chat'</span>)[<span class="hljs-number">0</span>].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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "<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>} |
setelah itu ketik npm install di terminal atau cmd kalian habis itu buka bagian bin/www dan masukan kode
|
1 2 3 4 5 6 |
<span class="hljs-keyword">var</span> server = http.createServer(app); <span class="hljs-comment">/** * Attach socket.io */</span> app.io.attach(server); |
ini di bawah app.set(‘port’, port); setelah itu buka app.js dan masukan berapa kode ini
|
1 2 3 4 5 6 7 8 |
//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); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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 } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"><<span class="hljs-title">%=</span> <span class="hljs-attribute">title</span> %></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/socket.io/socket.io.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<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>></span> <span class="hljs-tag"><<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>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/jquery-2.1.4.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/bootstrap.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span>></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"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/main.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container-fluid"</span>></span> <span class="hljs-tag"><<span class="hljs-title">nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-light bg-faded"</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item active"</span>></span> <span class="hljs-tag"><<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>></span>Home <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>></span>(current)<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item"</span>></span> <span class="hljs-tag"><<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>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-tag"></<span class="hljs-title">nav</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-lg-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"chat"</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-inline"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>></span> <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<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>></span>SEND !!<span class="hljs-tag"></<span class="hljs-title">button</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span> |
dan ini untuk main.js yang di taruh di folder public/js
|
1 2 3 4 5 6 7 8 |
<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">'<li>'</span>+<span class="hljs-string">'<div style="color:#e74c3c;float:left">'</span>+msg.nama+<span class="hljs-string">'</div>'</span>+<span class="hljs-string">': '</span>+msg.message+<span class="hljs-string">'</li>'</span>); $(<span class="hljs-string">'.chat'</span>).scrollTop($(<span class="hljs-string">'.chat'</span>)[<span class="hljs-number">0</span>].scrollHeight); }) |
Baca Artiker menarik lain nya
Tutorial php login script admin and user
Tutorial login php session example
Tutorial login php page
Tutorial php login page with mysql database
Related posts brought to you by Yet Another Related Posts Plugin.
DVD Membangun Sistem Informasi Rumah Sakit - SIRS Dengan Codeigniter 
Tutorial Codeigniter membuat aplikasi rumah sakit 
Tutorial Codeigniter membuat aplikasi siakad 
Tutorial Codeigniter cara membuat webiste dan boostrap 
Tutorial android membuat aplikasi e-commerce dengan android studio 
siap