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); }) |
Tutorial Kotlin - Tutorial Kotlin Membuat Aplikasi Cek Ongkir api 
Tutorial Vue JS - Tutorial Vue Js Membuat aplikasi keuangan dengan Codeigniter 
E-book Membuat aplikasi e-commerce sederhana dengan laravel 5.6 
Aplikasi e-commerce dengan codeigniter 3 dan PHP 7 rest API rajaongkir 
Tutorial android studio dengan codeigniter membuat aplikasi video 
gan, numpang nyedot ya, mo cob