room

OmerCatalkaya · Nov 3, 2018 · 0a5afad · 0a5afad
1 parent f02d15f
commit 0a5afad
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 0 deletions.
diff --git a/room.html b/room.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="html">
+
+<head>
+
+    <meta charset="UTF-8">
+    <title>Web Socket</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+    <script>
+
+        $(() => {
+
+            const socket = io.connect("http://localhost:3000/");
+
+            $("#joinRoom").on("click", () => {
+                socket.emit("joinRoom", { name: $("#roomName").val() });
+            });
+
+            $("#leaveRoom").on("click", () => {
+                socket.emit("leaveRoom", { name: $("#roomName").val() });
+            });
+
+            socket.on("new join", (data) => {
+                //$(".logs").append("<div>Odaya biri katıldı</div>");
+                $("#userCount").html(`Bu odada <b> ${data.count}</b> kişi var...`);
+            });
+
+            socket.on("leave room", (data) => {
+                $("#userCount").html(`Bu odada <b> ${data.count}</b> kişi var...`);
+            });
+
+            socket.on("log", (data) => {
+                $("#logs").append(data.message + "<br>");
+                $(`#roomName, #joinRoom`).attr("disabled", "disabled");
+                $(`#leaveRoom`).show();
+            });
+
+
+            socket.on("socket leaved", (data) => {
+                $("#logs").append(data.message + "<br>");
+                $(`#roomName, #joinRoom`).removeattr("disabled");
+                $(`#leaveRoom`).hide();
+                $(`#userCount`).empty();
+            });
+        });
+
+
+    </script>
+
+    <style>
+
+        #leaveRoom{
+            display: none;
+        }
+
+</style>
+
+</head>
+
+<body>
+
+    <input type="text" id="roomName">
+
+    <button id="joinRoom"> Join </button>
+    <button id="leaveRoom"> Leave </button>
+
+    <!-- <div class="logs"></div> -->
+
+    <br><br>
+
+    <div id="logs"></div>
+
+    <br><br>
+
+    <div id="userCount"></div>
+
+</body>
+
+</html>
diff --git a/room.js b/room.js
@@ -0,0 +1,39 @@
+
+const http = require("http");
+const socketio = require("socket.io");
+const server = http.createServer((req, res) => {
+    res.end("Hey heyyyy.... heyyyyy...heyyyy");
+});
+
+server.listen(3000);
+
+const io = socketio.listen(server);
+io.on("connection", (socket) => {
+    socket.on("joinRoom", (data) => {
+        socket.join(data.name, () => {
+
+            console.log("Sınıfın adı : " + data.name + " odaya giriş yapıldı...");
+
+            //let count = io.sockets.adapter.rooms[data.name].length;
+            //socket.to(data.name).emit("new join"); // Kendisi hariç odadaki herkese gönderilir.
+            //io.to(data.name).emit("new join");     // Kendisine ve odadaki herkese gönderir.
+
+            io.to(data.name).emit("new join", { count: getOnlineCount(io, data) });
+
+            socket.emit("log", { message: "Odaya girdiniz.  " });
+
+            console.log("birisi odaya girdi...");
+
+        });
+
+
+    });
+
+
+
+});
+
+const getOnlineCount = (io, data) => {
+    const room = io.sockets.adapter.rooms[data.name];
+    return room ? room.length : 0;
+};
diff --git a/roomYeni.html b/roomYeni.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Websocket</title>
+    <style>
+        #leaveRoom{
+            display: none;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
+    <script>
+        $(() => {
+            const socket = io.connect('http://localhost:3000', {
+                reconnectionAttempts: 4,
+                reconnectionDelay: 3000,
+                // reconnection: false
+            });
+            socket.on('reconnect_attempt', () => {
+                $('.reconnnectStatus').html('Yeniden bağlanmaya çalışılıyor.');
+            });
+            socket.on('reconnect_error', () => {
+                setTimeout(() => {
+                    $('.reconnnectStatus').html('Yeniden bağlanma başarısız.');
+                },1500);
+            });
+            socket.on('reconnect', () => {
+                $('.reconnnectStatus').html('Yeniden bağlanma başarılı.');
+            });
+            $('#joinRoom').on('click', () => {
+               socket.emit('joinRoom', { name: $('#roomName').val() });
+            });
+            $('#leaveRoom').on('click', () => {
+               socket.emit('leaveRoom', { name: $('#roomName').val() });
+            });
+            socket.on('new join', (data) => {
+                $('#userCount').html(`Bu odada <b> ${ data.count } </b> kişi var.`);
+            });
+            socket.on('leavedRoom', (data) => {
+                $('#userCount').html(`Bu odada <b> ${ data.count } </b> kişi var.`);
+            });
+            socket.on('log', (data) => {
+                $('.logs').append(data.message);
+                $('#roomName, #joinRoom').attr('disabled', 'disabled');
+                $('#leaveRoom').show();
+            });
+            socket.on('socket.leaved', (data) => {
+                $('.logs').append('</br>'+ data.message + '</br>');
+                $('#roomName, #joinRoom').removeAttr('disabled');
+                $('#leaveRoom').hide();
+                $('#userCount').empty();
+            });
+        });
+    </script>
+</head>
+<body>
+    <div class="reconnnectStatus"></div>
+
+    <input id="roomName" />
+    <button id="joinRoom">Join</button>
+    <button id="leaveRoom">Leave</button>
+    <div class="logs"></div>
+    <br><br>
+    <div id="userCount"></div>
+</body>
+</html>
diff --git a/roomYeni.js b/roomYeni.js
@@ -0,0 +1,47 @@
+const http = require("http");
+const socketio = require("socket.io");
+const server = http.createServer((req, res) => {
+  res.end("hey!");
+});
+
+server.listen(3000);
+
+//const OjectKeys = Object.keys({ a: 1, b: 2, c: 3 });
+const OjectKeys = Object.keys([ "A", "B", "C" ]);
+console.log(OjectKeys);
+
+const io = socketio.listen(server);
+
+io.on("connection", socket => {
+  console.log(socket.id);
+  socket.join("room 1");
+  socket.join("room 2");
+  socket.join("room 3", () => {
+    const rooms = Object.keys(socket.rooms);
+    console.log(rooms);
+  });
+
+  socket.on("joinRoom", data => {
+    socket.join(data.name, () => {
+      io.to(data.name).emit("new join", { count: getOnlineCount(io, data) }); // Kendisine ve odadaki herkese gönderir.
+      //socket.to(data.name).emit('new join', { count: getOnlineCount(io, data) }); // Kendisi hariç odadaki herkese gönderilir.
+      socket.emit("log", {
+        message: "Sınıfın adı : " + data.name + " odaya giriş yapıldı..."
+      });
+    });
+  });
+
+  socket.on("leaveRoom", data => {
+    socket.leave(data.name, () => {
+      io.to(data.name).emit("leavedRoom", { count: getOnlineCount(io, data) });
+      socket.emit("socket.leaved", {
+        message: "Sınıfın adı : " + data.name + " odasından ayrıldınız..."
+      });
+    });
+  });
+});
+
+const getOnlineCount = (io, data) => {
+  const room = io.sockets.adapter.rooms[data.name];
+  return room ? room.length : 0;
+};