Merhabalar,
Basit bir Chat uygulaması yazmaya çalışıyorum. Socket.io kullanmadan AJAX’ı çözmeye çalışıyorum.
1-Textarea’daki veriyi submit ettiğimde serverda veriyi yakalıyorum
2- Veriyi DB’ye kaydediyorum
3- DB’den son veriyi çekip txt dosyasına yazıyorum.
4- onreadystatechange ile txt dosyasında değişiklik olduğunda tetiklenen fonksiyon ile innerHTML ile
elemanına txt içeriğini aktarıyorum. (Aslında bu şekilde işlediğinden de emin değilim ama amacım bu)
Durum şu ki forma yazı yazıp gönder dediğimde her şey tıkır tıkır işliyor ancak klasöre gidip txt dosyasını kendim değiştirdiğimde bu ekranıma yansımıyor. Sayfayı yenilemem gerekiyor.
İstediğim gerçek zamanlı olarak DataBase’den veri çekmek.
Sayfayı yenilemeksizin değişen veriyi ekranıma yansıtmak bu kadar zor olmamalı.
app.js
const express = require('express');
const app = express();
const path = require('path');
const mngs = require('mongoose');
const bodyparser = require('body-parser');
const fs = require('fs');
app.use('/public', express.static(path.join(__dirname, 'public'))); //express.static herkese açık klasörü belirler
app.use(bodyparser.urlencoded({extended:false})); // URL olarak gelen requestleri parçalayarak kullanımını kolaylaştırır
app.use(bodyparser.json({extended:false})); // JSON olarak gelen requestleri parçalayarak kullanımını kolaylaştırır
//mongo ile bağlantı kuruluyor "mongodb://127.0.0.1:27017" ifadesi standarttır. "/chatDB" ise oluşturduğumuz DB ismi
mngs.connect('mongodb://127.0.0.1:27017/chatDB',{ useNewUrlParser: true, useUnifiedTopology: true }, function(err,data){
if (err){
console.log('sunucu bağlantı hatası:'+err)
}else{
console.log('DB bağlandı...')}
});
//mongoose ile veri göndermek için önce veri tabanı şeması oluşturuyoruz, böylece giden veriler şema ile aynı yapıda DB'ye kaydolacak. "mesajlar" colection ismimizi gösterir
const Schema = mngs.Schema;
let DBsema = new Schema(
{
mesaj:String,
tarih:{type:Date, default:Date.now}
},
{
collection:'mesajlar'
}
);
let ChatSema = mngs.model('ChatSema', DBsema);
//ana sayfa için index.html sayfasını gönderiyoruz
//Get metodu ile
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
//POST metodu ile
app.post('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
console.log('post geldi');
var varmesaj= req.body.mesaj;
ChatSema.create({ mesaj:varmesaj }, (err, result) => {
if (err) throw err;
console.log(result);
veriyicek();
});
});
//mongoDB'den bütün collectionu çekip son gönderinin mesaj elemanını yakalıyoruz.
function veriyicek(){
ChatSema.find({},function(err,data){
if (err) throw err;
const DBlemansayisi=data.length;
const yenidata=DBlemansayisi-1;
var sonmesajelemani = data[yenidata].mesaj;
console.log(' SON Mesaj elemanı:'+sonmesajelemani);
//DB'den yakaladığımız son elemanı txt dosyasına yazdırıyoruz
fs.appendFile('./public/deneme.txt', '<br>'+sonmesajelemani+'<br>', function (err, data) {
if (err) throw err;
console.log('Veri başarıyla yazıldı.');
});
});
};
//sunucu çalışmaya başlar
app.listen(9999, function () {
console.log('Sunucu çalışıyor...');
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<FORM ACTION="/" METHOD=POST >
<textarea TYPE=text NAME="mesaj"></textarea><br>
<INPUT TYPE=submit value="Mesajı Gönder">
</FORM>
<h1>Gelen mesajlarh1</h1>
<P>Gelen Mesajlar</P>
<script>
var xhr = new XMLHttpRequest();
var metinsec = document.querySelector('p');
//document.querySelector('h1').innerHTML='deneme';
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200 || this.status == 304) {
var xmldosyasi= xhr.responseText;
metinsec.innerHTML=xmldosyasi;
console.log(xmldosyasi);
};
};
xhr.open('GET', 'public/deneme.txt', true);
xhr.send();
</script>
</body>
</html>