Yazar: admin

laravel socket io mesajlaşma uygulaması basic

öncelikle https://www.youtube.com/watch?v=MNf0piqRdHg bu videodan yararlandığımı bildiririm. 2-3 defa kullanım ve videoya dönmemek için kendimce bişiler yazıyorum. ilk defa yapanlar videodan yaparsa iyi olur herkes için.

laravel’i kurduk.
nodejs kurduk. (https://nodejs.org/en/download/)
laravel klasöründe iken terminali açtık ve aşağıdaki kodu yazdık.

1
npm i express

sonra npm socket io kurulumu için;

1
npm install socket.io

ana klasöre server.js adlı bir dosya oluştur. içine aşağıdaki kodları yaz.

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
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Chat App</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <!-- JavaScript Bundle with Popper -->
 
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
 
        <div class="container">
            <div class="row">
                <div class="chat-content">
                    <ul>
                        <li>asdasdasdsad</li>
                    </ul>
                </div>
                <div class="chat-box">
                    <div class="chat-input bg-info" id="chatInput" contenteditable=""></div>
                </div>
            </div>
        </div>
        <script>
            $(function (){
                let ip_address = '127.0.0.1';
                let socket_port = '3000';
                let socket = io(ip_address + ':' + socket_port);
 
                let chatInput = $("#chatInput");
                chatInput.keypress(function (e){
                    let message = $(this).html();
 
                    if(e.which === 13 && !e.shiftKey){
                        socket.emit('sendChatToServer',message);
                        chatInput.html('');
                        return false;
                    }
                });
 
                socket.on('sendChatToClient',(message)=>{
                    $('.chat-content ul').append('<li>'+ message +'</li>');
                });
 
            });
        </script>
    </body>
</html>

sonra welcome.blade.php içine aşağıdaki kodları yaz.

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
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Chat App</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <!-- JavaScript Bundle with Popper -->
 
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
 
        <div class="container">
            <div class="row">
                <div class="chat-content">
                    <ul>
                        <li>asdasdasdsad</li>
                    </ul>
                </div>
                <div class="chat-box">
                    <div class="chat-input bg-info" id="chatInput" contenteditable=""></div>
                </div>
            </div>
        </div>
        <script>
            $(function (){
                let ip_address = '127.0.0.1';
                let socket_port = '3000';
                let socket = io(ip_address + ':' + socket_port);
 
                let chatInput = $("#chatInput");
                chatInput.keypress(function (e){
                    let message = $(this).html();
 
                    if(e.which === 13 && !e.shiftKey){
                        socket.emit('sendChatToServer',message);
                        chatInput.html('');
                        return false;
                    }
                });
 
                socket.on('sendChatToClient',(message)=>{
                    $('.chat-content ul').append('<li>'+ message +'</li>');
                });
 
            });
        </script>
    </body>
</html>

terminalde en sonra “node server” diyip çalıştır ondan sonra sistemi test et.

flutter sayfalar arası geçiş navigator

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GirisEkrani(),
    );
  }
}
class GirisEkrani extends StatefulWidget {
  @override
  _GirisEkraniState createState() => _GirisEkraniState();
}
class _GirisEkraniState extends State<GirisEkrani> {
  TextEditingController t1 = TextEditingController();
  TextEditingController t2 = TextEditingController();
  girisYap() {
    if (t1.text == "admin" && t2.text == "1234") {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ProfilEkrani(
            kullaniciAdi: t1.text,
            sifre: t2.text,
          ),
        ),
      );
    } else {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: new Text("Yanlış kullanıcı adı veya şifre"),
            content: new Text("Lütfen giriş bilgilerinizi gözden geçirin."),
            actions: <Widget>[
              new FlatButton(
                child: new Text("Kapat"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Giriş Ekrani")),
      body: Container(
        margin: EdgeInsets.all(100),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(hintText: "Kullanıcı Adı"),
              controller: t1,
            ),
            TextFormField(
              decoration: InputDecoration(hintText: "Şifre"),
              controller: t2,
            ),
            RaisedButton(
                onPressed: () {
                  girisYap();
                },
                child: Text("Giriş Yap")),
          ],
        ),
      ),
    );
  }
}
class ProfilEkrani extends StatefulWidget {
  String kullaniciAdi, sifre;
  ProfilEkrani({this.kullaniciAdi, this.sifre});
  @override
  _ProfilEkraniState createState() => _ProfilEkraniState();
}
class _ProfilEkraniState extends State<ProfilEkrani> {
  cikisYap() {
    Navigator.pop(context);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: cikisYap,
              child: Text("Çıkış Yap"),
            ),
            Text("Kullanıcı Adınız: ${widget.kullaniciAdi}"),
            Text("Şifreniz: ${widget.sifre}"),
          ],
        ),
      ),
    );
  }
}

flutter sayfalar arası geçiş basit

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (context) => GirisEkrani(),
        "/ProfilSayfasiRotasi": (context) => ProfilEkrani(),
      },
    );
  }
}
 
class GirisEkrani extends StatefulWidget {
  const GirisEkrani({Key? key}) : super(key: key);
 
  @override
  _GirisEkraniState createState() => _GirisEkraniState();
}
 
class _GirisEkraniState extends State<GirisEkrani> {
  girisYap() {
    Navigator.pushNamed(context, "/ProfilSayfasiRotasi");
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Giriş Ekranı"),
        ),
        body: Container(
            child: Column(
          children: [
            ElevatedButton(onPressed: girisYap, child: Text("Giriş Yap"))
          ],
        )));
  }
}
 
class ProfilEkrani extends StatefulWidget {
  const ProfilEkrani({Key? key}) : super(key: key);
 
  @override
  _ProfilEkraniState createState() => _ProfilEkraniState();
}
 
class _ProfilEkraniState extends State<ProfilEkrani> {
  cikisYap() {
    Navigator.pop(context);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Profil Sayfası"),
        ),
        body: Container(
            child: Column(
          children: [
            ElevatedButton(onPressed: cikisYap, child: Text("Çıkış Yap"))
          ],
        )));
  }
}

flutter class ile basit mesajlaşma uygulaması

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Chat Uygulaması Arayüzü",
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  const Iskele({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Chat Uygulaması"),
        ),
        body: AnaEkran());
  }
}
 
class AnaEkran extends StatefulWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  TextEditingController t1 = TextEditingController();
  List<MesajBalonu> mesajListesi = [];
 
  listeyeEkle(String gelenMesaj) {
    setState(() {
      MesajBalonu mesajNesnesi = MesajBalonu(mesaj: gelenMesaj);
      mesajListesi.insert(0, mesajNesnesi);
      t1.clear();
    });
  }
 
  Widget metinGirisAlani() {
    return Container(
      margin: EdgeInsets.all(15),
      child: Row(
        children: [
          Flexible(
            child: TextField(
              controller: t1,
            ),
          ),
          IconButton(
            onPressed: () => listeyeEkle(t1.text),
            icon: Icon(Icons.send),
          )
        ],
      ),
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Flexible(
            child: ListView.builder(
                reverse: true,
                itemCount: mesajListesi.length,
                itemBuilder: (context, indeksNumarasi) =>
                    mesajListesi[indeksNumarasi]),
          ),
          Divider(
            thickness: 1,
          ),
          metinGirisAlani(),
        ],
      ),
    );
  }
}
 
String isim = "Kullanici1";
 
class MesajBalonu extends StatelessWidget {
  var mesaj;
  MesajBalonu({required this.mesaj});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 15),
      child: Row(
        children: [
          CircleAvatar(
            child: Text(isim[0]),
          ),
          Column(
            children: [
              Text(isim),
              Text(mesaj),
            ],
          )
        ],
      ),
    );
  }
}

flutter mesajlaşma uygulaması

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
78
79
80
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Temel Mesajlaşma Uygulaması",
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  const Iskele({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Mesajlaşma Uygulaması Arayüzü"),
      ),
      body: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatefulWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  List mesajlistesi = [];
 
  TextEditingController t1 = TextEditingController();
 
  mesajlariEkle(String metin) {
    setState(() {
      mesajlistesi.insert(0, metin);
      t1.clear();
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(40),
      child: Column(
        children: [
          Flexible(
            child: ListView.builder(
              reverse: true,
              itemCount: mesajlistesi.length,
              itemBuilder: (context, int indeksNumarasi) =>
                  Text(mesajlistesi[indeksNumarasi]),
            ),
          ),
          Row(
            children: [
              Flexible(
                child: TextField(
                  controller: t1,
                  onSubmitted: mesajlariEkle,
                ),
              ),
              ElevatedButton(
                  onPressed: mesajlariEkle(t1.text), child: Text("Button")),
            ],
          ),
        ],
      ),
    );
  }
}

to do uygulaması flutter

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ToDo Uygulaması",
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alışveriş Listesi'),
      ),
      body: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatefulWidget {
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  TextEditingController t1 = TextEditingController();
  List alisverisListesi = [];
 
  elemanEkle() {
    setState(() {
      alisverisListesi.add(t1.text);
      t1.clear();
    });
  }
 
  elemanCikar() {
    setState(() {
      alisverisListesi.remove(t1.text);
      t1.clear();
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Flexible(
            child: ListView.builder(
              itemCount: alisverisListesi.length,
              itemBuilder: (context, indeksNumarasi) => ListTile(
                subtitle: Text("Alışveriş Listesi"),
                title: Text(alisverisListesi[indeksNumarasi]),
              ),
            ),
          ),
          TextField(
            controller: t1,
          ),
          ElevatedButton(onPressed: elemanEkle, child: Text("Ekle")),
          ElevatedButton(onPressed: elemanCikar, child: Text("Çıkar"))
        ],
      ),
    );
  }
}

flutter taslak

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hesap Makinesi',
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  const Iskele({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Basit Hesap Makinesi"),
      ),
      body: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatefulWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  num sayi1, sayi2, sonuc;
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: [
            
          ],
        ),
      ),
    );
  }
}

flutter ders 3

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "İlkel Blog Uygulaması",
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  const Iskele({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Blog Uygulaması"),
        ),
        body: AnaEkran());
  }
}
 
class AnaEkran extends StatefulWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  String blogYazisi = "Caferito";
 
  martGoster() {
    setState(() {
      blogYazisi = "Mart Sayısı";
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(blogYazisi),
            RaisedButton(
              onPressed: martGoster,
              child: Text("Mart Yazısı"),
            )
          ],
        ),
      ),
    );
  }
}

flutter örnek kod 2

kodu al, aşağıdaki siteye yapıştır örneği göreceksin. çok çok basit bir uygulama örneği. sadece ekrana ampül gibi lorem ipsum yapıştırıyor o kadar.
https://dartpad.dev/

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "İlkel Blog Uygulaması",
      home: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatelessWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Blog Uygulaması"),
      ),
      body: Container(
        margin: EdgeInsets.all(50),
        child: Center(
          child: Text(
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'),
        ),
      ),
    );
  }
}

flutter örnek kod giriş

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "İlkel Blog Uygulaması",
      home: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatelessWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Blog Uygulaması"),
      ),
      body: Container(
        child: Center(
          child: Text('Merhaba'),
        ),
      ),
    );
  }
}