AnaSayfa Bilgisayar Mühendisliği NodeJs ile Kendi Chat Sayfanızı Yapın (İstediğiniz Şekilde Geliştirebilirsiniz)

NodeJs ile Kendi Chat Sayfanızı Yapın (İstediğiniz Şekilde Geliştirebilirsiniz)

731

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

indirmek için tıkla

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

&lt;/pre&gt;<br />
&lt;pre&gt;&lt;code&gt;npm install --save express@4.15.2&lt;/code&gt;&lt;/pre&gt;<br />
&lt;pre&gt;

bunu da çalıştırdıktan sonra index.js dosyasına aşağıdaki kodu yazalim.

&lt;/pre&gt;<br />
&lt;pre&gt;&lt;code&gt;var app = require('express')();<br />
var http = require('http').Server(app);</p>
<p>app.get('/', function(req, res){<br />
  res.send('</p>
<p>&lt;h1&gt;Hello world&lt;/h1&gt;</p>
<p>');<br />
});</p>
<p>http.listen(3000, function(){<br />
  console.log('listening on *:3000');<br />
});&lt;/code&gt;&lt;/pre&gt;<br />
&lt;pre&gt;

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.

</p>
<p>&lt;pre&gt;&lt;code&gt;<br />
app.get('/', function(req, res){<br />
res.sendFile(__dirname + '/index.html');<br />
});<br />
    &lt;/code&gt;&lt;/pre&gt;</p>
<p>

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.

&lt;!doctype html&gt;<br />
&lt;html&gt;<br />
  &lt;head&gt;<br />
    &lt;title&gt;Socket.IO chat&lt;/title&gt;<br />
    &lt;style&gt;<br />
      * { margin: 0; padding: 0; box-sizing: border-box; }<br />
      body { font: 13px Helvetica, Arial; }<br />
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }<br />
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }<br />
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }<br />
      #messages { list-style-type: none; margin: 0; padding: 0; }<br />
      #messages li { padding: 5px 10px; }<br />
      #messages li:nth-child(odd) { background: #eee; }<br />
    &lt;/style&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
    &lt;ul id=&quot;messages&quot;&gt;&lt;/ul&gt;<br />
    &lt;form action=&quot;&quot;&gt;<br />
      &lt;input id=&quot;m&quot; autocomplete=&quot;off&quot; /&gt;&lt;button&gt;Send&lt;/button&gt;<br />
    &lt;/form&gt;<br />
  &lt;/body&gt;<br />
&lt;/html&gt;&lt;/code&gt;

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

İLGİLİ MAKALE  Seo Hakkında Bilinmeyenler

<code>npm install --save socket.io</code>

şimdi index.js sayfasındaki kodları aşağıdaki kodlarla değiştrilerim

</p>
<p>&lt;pre&gt;&lt;code&gt;var app = require('express')();<br />
var http = require('http').Server(app);<br />
var io = require('socket.io')(http);</p>
<p>app.get('/', function(req, res){<br />
  res.sendFile(__dirname + '/index.html');<br />
});</p>
<p>io.on('connection', function(socket){<br />
  console.log('a user connected');<br />
});</p>
<p>http.listen(3000, function(){<br />
  console.log('listening on *:3000');<br />
});<br />
    &lt;/code&gt;&lt;/pre&gt;</p>
<p>

aşağıdaki kodu index.htmlde body bitmeden hemen öncesine yapıştıracağız.

</p>
<p>&lt;pre&gt;&lt;code&gt;<br />
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;<br />
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%3E%0A%20%20var%20socket%20%3D%20io()%3B%0A%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;&lt;/code&gt;&lt;/pre&gt;</p>
<p>

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

</p>
<p>&amp;nbsp;</p>
<p>var app = require('express')();<br />
var http = require('http').Server(app);<br />
var io = require('socket.io')(http);</p>
<p>app.get('/', function(req, res){<br />
res.sendFile(__dirname + '/index.html');<br />
});</p>
<p>&amp;nbsp;</p>
<p>io.on('connection', function(socket){<br />
console.log('a user connected');<br />
socket.on('disconnect', function(){<br />
console.log('user disconnected');<br />
});<br />
});</p>
<p>http.listen(3000, function(){<br />
console.log('listening on *:3000');<br />
});</p>
<p>

İndex.html sayfasında aşağıdaki kodu body sayfasının öncesine yapıştıralım

</p>
<p>&lt;pre&gt;&lt;code&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;<br />
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.1.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;<br />
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%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&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;&lt;/code&gt;&lt;/pre&gt;</p>
<p>

arkadaşlar tekrardan ben bütün kodları göndereceğim. sıkıntı çekmenizi istemem.

index.html

</p>
<p>&lt;!doctype html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;Socket.IO chat&lt;/title&gt;</p>
<p>&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%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&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;style&amp;gt;&quot; title=&quot;&amp;lt;style&amp;gt;&quot; /&gt;</p>
<p>&lt;/head&gt;<br />
&lt;body&gt;</p>
<p>&lt;ul id=&quot;messages&quot;&gt;&lt;/ul&gt;</p>
<p>&lt;form action=&quot;&quot;&gt;<br />
&lt;input id=&quot;m&quot; autocomplete=&quot;off&quot; /&gt;&lt;button&gt;Send&lt;/button&gt;<br />
&lt;/form&gt;</p>
<p>&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22%2Fsocket.io%2Fsocket.io.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;<br />
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.1.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;<br />
&lt;script&gt;<br />
$(function () {<br />
var socket = io();<br />
$('form').submit(function(){<br />
socket.emit('chat message', $('#m').val());<br />
$('#m').val('');<br />
return false;<br />
});<br />
socket.on('chat message', function(msg){<br />
$('#messages').append($('</p>
<p>&lt;li&gt;').text(msg));<br />
});<br />
});<br />
&lt;/script<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p>

index.js

</p>
<p>&amp;nbsp;</p>
<p>var app = require('express')();<br />
var http = require('http').Server(app);<br />
var io = require('socket.io')(http);</p>
<p>app.get('/', function(req, res){<br />
res.sendFile(__dirname + '/index.html');<br />
});</p>
<p>io.on('connection', function(socket){<br />
socket.on('chat message', function(msg){<br />
console.log('message: ' + msg);<br />
io.emit('chat message', msg);<br />
});<br />
});</p>
<p>&amp;nbsp;</p>
<p>http.listen(3000, function(){<br />
console.log('listening on *:3000');<br />
});</p>
<p>

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.

 

  • Google’nin Geliştirdiği Yepyeni dili : Node.js

    Bir Dönem internette deli gibi dolanan bir haber vardı: “Google keni Dilini OLuşturd…
Daha Fazla İlgili Makale Yükleyin
Daha Fazla Yük Bilgisayar Mühendisliği

Bir Yorum Yazın

Ayrıca Kontrol Edin

KBÜ Bilgisayar Mühendisliği Ders Notları

Karabük Üniversitesi Bilgisayar Mühendisliği ders notlarına Bu yazımızdan ulaşabilirsiniz.…