// здесь свой адрес IPv4 заданный роутером
const ws = new WebSocket("ws:// 192.168.1.69:8080");
Сурет 3.3 - IPv4 роутер адресін баптау
Келесі қадамда веб- қосымшаның функционалдық бөлігінің server.js скрипті бапталады:
// подключение модуля
const WebSocket = require('ws');
const express = require('express')
const path = require('path')
const app = express()
const PORT = 3000
// Создаем сервер через порт 8080
const server = new WebSocket.Server({
port: 8080,
clientTracking: true
});
const users = {
type: 'allUsers',
allUsers: []
};
const history = {
type: 'history',
messages: []
};
app.use(express.static(path.join(__dirname, 'src')))
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'src', 'index.html'))
})
// отслеживаем событие connection
server.on('connection', function connection(ws) {
// отправка данных обо всех онлайн пользователях
if (users.allUsers.length) {
ws.send(JSON.stringify(users));
}
// пришли данные с клиента
ws.on('message', function incoming(message) {
let messageBody = JSON.parse(message);
// если поступили данные о старом пользователе
if (messageBody.type == 'oldUser') {
ws.user = messageBody.data;
users.allUsers.forEach(user => {
if (user.nick == messageBody.data.nick) {
user.online = true;
}
});
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(users));
}
if (client == ws && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(history));
}
});
} else if (messageBody.type == 'newUser') {
ws.user = messageBody.data;
users.allUsers.push(ws.user);
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({ content: messageBody, client: ws.user }));
client.send(JSON.stringify(users));
}
});
// если поступили данные о фотографии пользователя
} else if (messageBody.type == 'photo') {
ws.user.photo = messageBody.data;
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({ content: messageBody, client: ws.user }));
}
});
// если поступили данные о сообщении
} else if (messageBody.type == 'message') {
const date = new Date();
let time = date.toLocaleTimeString("ru", {
hour12: false,
hour: "numeric",
minute: "numeric"
});
messageBody.time = time;
history.messages.push({ content: messageBody, client: ws.user });
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({ content: messageBody, client: ws.user }));
}
});
}
});
// закрытие подключения
ws.on('close', (e) => {
users.allUsers.forEach(function (user) {
if (ws.user && user.name == ws.user.name) {
user.online = false;
}
});
server.clients.forEach(function each(client) {
client.send(JSON.stringify(users));
});
});
});
app.listen(PORT)
Әзірленген қосымшаның сипаттамасы:
Қосымшаны іске қосқан кезде авторизациядан өту керек, сурет 4.4
Сурет 3.4 - Авторизациялану қадамы
Тіркелгеннен кейін Веб-чат беті ашылады. Серверге қосылған барлық пайдаланушылармен нақты уақыт режимінде хабар алмасуға болады.
Қосымшаны тестілеу кезінде хабарламалар бірден түсетіні анықталды, сурет 4.5-4.6.
Сурет 3.5 - Қосымшаны тестілеу кезеңдері
Сурет 3.6 - Қосымшаны тестілеу кезеңдері
Сондай-ақ, фотосуретті Аватар ретінде жүктеуге болады, сурет 4.7.
Сурет 3.7- Фотосуретті Аватар ретінде жүктеу
Достарыңызбен бөлісу: |
