Emit and Broadcast JSON using Socket.io and JS/ES5

Запись от 8Observer8 размещена 17.02.2019 в 18:36

Показов 1473 Комментарии 1

Метки javascript, json, socket.io

Blog content

I will show differences between "emit" and "broadcast" on server side.

In short:

"emit" sends JSON data to a connected client
"broadcast" sends JSON data to every client except the connected client

At first time create a connection between the server and the client using this instruction: 101. Socket.io Connection, JS/ES5

We have this callback function in "app.js":

JavaScript
1
2
3
4
io.sockets.on("connection", function(socket)
{
    console.log("client was connected");
});

We will generate a name for a connected client on the server side. Client will get his own name from the server and will show it on the screen in a browser. We will use "shortid" module for generation names for clients.

Install "shortid" package. Type this command in the console from your project folder: npm install --save shortid

We will use "shortid" module to generate a random unique name. Let's show generated name:

app.js

JavaScript
1
2
3
4
5
6
7
var shortid = require('shortid');
 
io.sockets.on("connection", function(socket)
{
   var clientName = shortid.generate();
    console.log("client was connected, name = " + clientName);
);

You will see a message in the console, like this:

client was connected, name = 3fPIOl61W

Let's create two buttons: "Get My Name" and "Send my Name to all Clients". Copy this code to server and to client sides. Do not forget to run the server by command: node app.js After this you need to open two clients in different browser tabs: http://localhost:8080/. Open the browser console, for example in Chrome: "Ctrl+Shift+J" and clear "cache" by RMB on "Reload" button and select "Empty Cache and Hard Reload". And do not forget reload the server when you made changes on the server side code.

app.js

JavaScript
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
var express = require("express");
var app = express();
var server = require("http").Server(app);
 
app.get("/", function(req, res)
{
    res.sendFile(__dirname + "/client/index.html");
});
app.use("/client", express.static(__dirname + "/client"));
 
var port = 8080;
server.listen(port);
console.log("Server started. Port = " + port);
 
var io = require("socket.io")(server, {});
var shortid = require('shortid');
 
io.sockets.on("connection", function(socket)
{
    var clientName = shortid.generate();
    console.log("client was connected, name = " + clientName);
 
    socket.on("getMyName", function()
    {
        socket.emit("onGetMyName", { name: clientName });
    });
 
    socket.on("sendMyNameToAllClients", function()
    {
        socket.broadcast.emit("onSendMyNameToAllClients", { name: clientName });
        console.log(clientName);
    });
});

index.html

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <title>Multiplayer Snake</title>
</head>
 
<body>
    <button onclick="getMyName();">Get My Name</button>
    <button onclick="sendMyNameToAllClients();">Send my Name to all Clients</button>
    <script>
        var socket = io();
 
        socket.emit("hello", { message: "hello from client!" });
 
        socket.on("onGetMyName", function(data)
        {
            console.log("My Name: " + data.name);
        });
 
        socket.on("onSendMyNameToAllClients", function(data)
        {
            console.log("Name of another client: " + data.name);
        });
 
        function getMyName()
        {
            socket.emit("getMyName");
        }
 
        function sendMyNameToAllClients()
        {
            socket.emit("sendMyNameToAllClients");
        }
    </script>
</body>
 
</html>

Метки javascript, json, socket.io

Размещено в Без категории

« Socket.io Connection, JS/ES5 Главная страница Deploying Game Server on Heroku »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 1

Комментарии

	Next part: Deploying Game Server on Heroku
	Запись от 8Observer8 размещена 17.02.2019 в 20:58

8Observer8 8Observer8 на форуме

Регистрация 05.10.2013
Адрес Саратов
Сообщений 8,028
Записей в блоге 242

Новые блоги и статьи Все статьи Все блоги /
Модель здравоСохранения 15. Как мы чинили AnyLogic модель рабочего коллектива: сочленение диаграммы состояний болезней и поломок в ресурспул anaschu 23.05.2026 Как мы чинили AnyLogic модель рабочего коллектива Сегодня разобрались с пятью багами, из-за которых модель либо падала с ошибкой, либо давала совершенно бессмысленные результаты. Каждый баг был. . .	Диалоги с ИИ zorxor 23.05.2026 Насколько я понимаю - Вы - Искусственный Интеллект. Это так? Да, всё верно. Я — искусственный интеллект. Я представляю собой большую языковую модель, созданную для помощи в самых разных задачах. . . .	Модель здравосохранения 14. Собираем всю модель вместе. anaschu 22.05.2026 Модель собрана. В будущих постах на видео я покажу, как она работает. В этом посте запускаем её, проверяем результаты и разбираем что можно с ней делать дальше. Перед запуском проверяем. . .	Модель здравоохранения 13. Добавление самой системы здравоохранения. anaschu 22.05.2026 В предыдущем посте мы настроили болезни. Теперь добавим события, которые управляют здоровьем всего коллектива, а также настроим рабочий график и расчёт финансов. В Main создаём четыре события. . . .
Модель здравоохранения 12. добавление болезней через ресурпул, как аварии anaschu 22.05.2026 Болезни — это ключевая часть нашей модели. Нам нужно, чтобы работник периодически уходил на больничный, его задание при этом зависало, а после выздоровления работа возобновлялась. Реализуем это двумя. . .	Модель здравоохранения 11. Создаём классы Задание и Работник anaschu 22.05.2026 В AnyLogic каждая заявка и каждый ресурс — это объект определённого класса. Нам нужно создать два класса: Задание (заявка) и Работник (ресурс). Класс Задание В дереве проекта нажимаем правой. . .	Модель здравоохранения 10. Новая модель, смотрим, как добавлять логические блоки, и что писать внутри anaschu 22.05.2026 Открываем AnyLogic, создаём новый проект. В дереве проекта появляется класс Main — это главный агент, в котором будет жить вся наша логика. Палитра блоков Слева находится палитра. Нас интересует. . .	модель ЗдравоСохранения 9. Новая модель, разбираемся, как ее создавать anaschu 22.05.2026 В этой серии постов мы построим модель небольшого рабочего коллектива. Сотрудники получают задания, выполняют их, иногда болеют — и мы хотим посчитать, сколько это стоит компании. Метод. . .

Наверх

Сообщение форума

Отменить изменения