Chat (user writes a message and others get a message) using socket.io in Node.js (project in Visual Studio)

Компьютер, программы

→

Node.js (this is a web server that executes JS files)

Chat (пользователь пишет сообщение и у других появляется сообщение) используя socket.io в Node.js (проект в Visual Studio)

посмотрели 9031 раз

обновлено: 9 April 2018

Шаг 1) Запускаем Visual Studio 2013 или другую версию (лучше всего Visual Studio 2017)

Шаг 2) Создаем новый проект

Нажимаем в меню: File → New → Project
Выбираем: Other Languages → JavaScript → Node.js → Blank Node.js Web Application

Шаг 3) В файле server.js напишем такой код:

JavaScript Файл J:/NodeJsApp1/server.js

Описание файла server.js

Фрагмент кода

Что означает

Файл server.js
io.on('connection', function (socket) {

// добавляем user
Users.Add(socket)
...
});

означает что мы обработаем стандартное событие 'connection'
Обработчиком события является функция
function (socket) {
// добавляем user
Users.Add(socket)
...
}

событие 'connection' вызывется как только в my.html файле вызовется код:
<script>
var socket = io();
</script>

Файл server.js
socket.on('disconnect', function (msg) {
Users.Delete(socket); // delete user
});

означает что мы обработаем стандартное событие 'disconnect'
Обработчиком события является функция
function (msg) {
Users.Delete(socket); // delete user
}

событие 'disconnect' вызывется когда мы закроем страницу или нажмем refresh (перегрузим страницу)

Файл server.js
socket.on('User entered Name', function (userName) {
socket.userName = userName;
});

означает что обработаем мое событие (я ввел свое название) 'User entered Name'
Обработчиком события является функция
function (userName) {
socket.userName = userName;
}

событие 'User entered Name' вызывется как только в my.html файле вызовется код:
<script>
...
socket.emit("User entered Name", elem_userName.value);
...
</script>

Файл server.js
socket.on('add message', function (text) {
// send message "user added message" to all users
io.emit("user added message", { 'name': socket.userName, 'message': text });
});

означает что обработаем мое событие (я ввел свое название) 'add message'
Обработчиком события является функция
function (text) {
// send message "user added message" to all users
io.emit("user added message", { 'name': socket.userName, 'message': text });
}

событие 'add message' вызывется как только в my.html файле вызовется код:
<script>
...
socket.emit("add message", elem.value);
...
</script>

Шаг 4) добавим новый файл my.html

Нажимаем правой клавиши мыши на проекте NodeJsApp1 → Add → New Item → HTML file → my.html

В файле my.html напишем такой код:

Html Файл J:/NodeJsApp1/my.html

<html>


<head>
<title>My chat</title>
</head>


<body>
     
     <div id='SECTION_UserName' style='padding-top:15px;'>
          <div>User name:</div>
          <input type='text' id='elemID_UserName' autofocus />
<input type='submit' value='Ok' onclick='StoreUserName();' style='color:green; font-weight:700;' />
     </div>

     
     <div id='SECTION_messages' style='padding-top:15px; display:none;'>
Your message:
<div style='padding-bottom:15px;'>
<textarea type='text' id='myMessage' size='40' rows='4' cols='30'></textarea>
</div>
<input type='submit' value='Add message' onclick='AddMessage();' style='font-weight:700;' />
<div id='messages_history' style='padding-top:15px;'>
</div>
     </div>


<script src="/socket.io/socket.io.js"></script>
<script>
// create socket
var socket = io();

// receive message "user added message"
socket.on('user added message', function (msg) {
// html element
var elem = document.getElementById('messages_history');
elem.innerHTML += '<u>' + msg.name + '</u>' + ': ' + msg.message + '<BR>';
          });
</script>

<script>
function StoreUserName()
{
// html element
var elem_userName = document.getElementById('elemID_UserName');

// send message "User entered Name"
               socket.emit("User entered Name", elem_userName.value);

// show user name
               document.getElementById('SECTION_UserName').innerHTML = "User: " + '<b><font color=green>' + elem_userName.value + '</font></b>';

// show Div with messages
               document.getElementById('SECTION_messages').style.display = "";

// set focus
               document.getElementById('myMessage').focus();
}

function AddMessage() {
// html element
var elem = document.getElementById('myMessage');

// send message "add message"
socket.emit("add message", elem.value);

// clear
elem.value = "";
}
</script>
</body>

</html>

Описание файла my.html

Фрагмент кода

Что означает

Файл my.html
<script>
...
socket.on('user added message', function (msg) {
// html element
var elem = document.getElementById('messages_history');
elem.innerHTML += '<u>' + msg.name + '</u>' + ': ' + msg.message + '<BR>';
});
...
</script>

означает что обработаем мое событие (я ввел свое название) 'user added message'
Обработчиком события является функция
function (msg) {
// html element
var elem = document.getElementById('messages_history');
elem.innerHTML += '<u>' + msg.name + '</u>' + ': ' + msg.message + '<BR>';
}

событие 'user added message' вызывется как только в server.js файле вызовется код:
io.emit("user added message", { 'name': socket.userName, 'message': text });

На заметку!
• серверная функция socket.emit(message, data) отсылает конкретному пользователю data
• серверная функция io.emit(message, data) отсылает всем пользователя data

Шаг 5) добавим express и socket.io пакеты

Нажимаем в меню: Tools → NuGet Package Manager → Package Manager Console
В командной строке пишем:
npm install --save express

ждем и потом пишем:
npm install --save socket.io

Подробнее о добавлении npm пакетов...

Шаг 6) запускаем проект

Нажимаем меню Debug → Start Without Debugging