En son yazdığım node.js yazımda da belirttiğim gibi bugün beraber basit bir chat sayfası oluşturacağız.
Çoğu teknoloji ile uyumlu olan socket.io paketi üzerinden ders işleyeceğiz
ilk önce yapmanız gereken node.js’yi indirmek
ben kodlarımı yazmak için atom uygulamasını kullandım. sizde kullanmak istiyorsanız eğer indime linki burda
Şimdi masa üstünde bir dosya açın.
İçine girdikten sonra shfit tuşuna basılı tutarken mousa sağ tıklayın. orda komut penceresini burada aç seçeneği gelecek. ona tıklayalım.
ilk önce bir paket yüklemesi yapalım ve index.js adında bir dosya açalım
npm init
her adımı enter dyerek geçtikten sonra aşağıdaki kodu da çalıştıralım
</pre> <pre><code>npm install --save express@4.15.2</code></pre> <pre>
bunu da çalıştırdıktan sonra index.js dosyasına aşağıdaki kodu yazalim.
</pre>
<pre><code>var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('
<h1>Hello world</h1>
');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});</code></pre>
<pre>
terminale ‘node index.js’ yazdığımızda portu açık olarak gördüğümüzde sıkıntı olmadığı için sevinebiliriz.
buda tarayıcı çıktısı.
Daha sonra indexjs’nin içine aşağıdaki kodlarıda yapıştırıyoruz.
<pre><code>
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
</code></pre>
Ardından index.html adında bir sayfa açıyor ve aşağıdaki kodları içine yapıştırıyoruz. bunu sayesinde chat sayfası arayüzümüz hazır olacak.
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html></code>
Bu arada index.js sayfasındaki hello word yazısını artık kaldırabiliriz. Göstermeme gerek yok diye düşünüyorum.
şimdi socket.io paketini yükleyelim
<code>npm install --save socket.io</code>
şimdi index.js sayfasındaki kodları aşağıdaki kodlarla değiştrilerim
<pre><code>var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
</code></pre>
aşağıdaki kodu index.htmlde body bitmeden hemen öncesine yapıştıracağız.
<pre><code> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20var%20socket%20%3D%20io()%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /></code></pre>
bu kullanıcı bağlandığında terminal de bunu bize gösteriyor.
aşağıdaki kodları index.jsdeki tüm kodlarla değiştirelim ki işimiz garanti olsun
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
İndex.html sayfasında aşağıdaki kodu body sayfasının öncesine yapıştıralım
<pre><code><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%24(function%20()%20%7B%0A%20%20%20%20var%20socket%20%3D%20io()%3B%0A%20%20%20%20%24('form').submit(function()%7B%0A%20%20%20%20%20%20socket.emit('chat%20message'%2C%20%24('%23m').val())%3B%0A%20%20%20%20%20%20%24('%23m').val('')%3B%0A%20%20%20%20%20%20return%20false%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /></code></pre>
arkadaşlar tekrardan ben bütün kodları göndereceğim. sıkıntı çekmenizi istemem.
index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A*%20%7B%20margin%3A%200%3B%20padding%3A%200%3B%20box-sizing%3A%20border-box%3B%20%7D%0Abody%20%7B%20font%3A%2013px%20Helvetica%2C%20Arial%3B%20%7D%0Aform%20%7B%20background%3A%20%23000%3B%20padding%3A%203px%3B%20position%3A%20fixed%3B%20bottom%3A%200%3B%20width%3A%20100%25%3B%20%7D%0Aform%20input%20%7B%20border%3A%200%3B%20padding%3A%2010px%3B%20width%3A%2090%25%3B%20margin-right%3A%20.5%25%3B%20%7D%0Aform%20button%20%7B%20width%3A%209%25%3B%20background%3A%20rgb(130%2C%20224%2C%20255)%3B%20border%3A%20none%3B%20padding%3A%2010px%3B%20%7D%0A%23messages%20%7B%20list-style-type%3A%20none%3B%20margin%3A%200%3B%20padding%3A%200%3B%20%7D%0A%23messages%20li%20%7B%20padding%3A%205px%2010px%3B%20%7D%0A%23messages%20li%3Anth-child(odd)%20%7B%20background%3A%20%23eee%3B%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('
<li>').text(msg));
});
});
</script
</body>
</html>
index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
ve son olarak ortaya çıkan uygulama aşağıdaki gibidir
Bu yazımız da bukadar. yazıyı okuduğunuz için teşekkür ederim. Bu ve bunun gibi Güzel paylaşımlardan haberdar olmak için sosyal medyadan bizi takip edebilrsiniz.
