ö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.