Сегодня я буду реализовать простую чату, используя Nodejs в фоновом режиме и Socket.io в связи с клиентом и сервером. Это относительно зрелая структура WebSocket.
Начальная работа
1. Установите Express, используйте это для размещения Socket.io и статических страниц. Команда NPM Install Express -SAVE, -Save может добавить пакет в файл package.json.
2. Установите Socket.io и команда NPM Install Socket.io -save.
Написание кода сервера
Сначала мы проводим веб -сайт через Express и прикрепляем его к экземпляру Socket.io, потому что первое подключение Socket.io требует протокола HTTP
Кода -копия выглядит следующим образом:
var Express = require ('Express'),
io = require ('socket.io');
var app = express ();
app.use (express.static (__ dirname));
var server = app.listen (8888);
var ws = io.listen (сервер);
Добавьте событие подключения сервера. Когда клиентское соединение будет успешным, объявление выпускается для того, чтобы сообщать всем онлайн -пользователям, и когда пользователь отправляет сообщение, передается трансляцию, чтобы уведомлять других пользователей.
Кода -копия выглядит следующим образом:
ws.on ('connection', function (client) {
console.log ('/033 [96msomeOne подключает/033 [39m/n');
client.on ('join', function (msg) {
// проверка на дублирование
if (checknickname (msg)) {
Client.emit («Прозвище», «Есть дублирование прозвища!»);
}еще{
client.nickname = msg;
ws.sockets.emit («Объявление», «Система», MSG + 'присоединился к чату!');
}
});
// Слушайте отправить сообщения
client.on ('send.message', function (msg) {
client.broadcast.emit ('send.message', client.nickname, msg);
});
// уведомить других пользователей при отключении
client.on ('dinnonnect', function () {
if (client.nickname) {
client.broadcast.emit ('send.message', 'system', client.nickname + 'оставить комнату чата!');
}
})
})
Поскольку клиент идентифицируется по прозвищу, серверу нужна функция для обнаружения дублирования прозвища
Кода -копия выглядит следующим образом:
// Проверьте, является ли прозвище дублироваться
var checknickname = function (name) {
для (var k in ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == name) {
вернуть истину;
}
}
}
вернуть ложь;
}
Напишите код обслуживания клиентов
Поскольку сервер использует стороннюю структуру WebSokcet, страница фронта должна обратиться к клиентскому коду Socket.io отдельно. Исходный файл можно найти в модуле Socket.io. Путь под Windows-node_modules/socket.io/node_modules/socket.io-client/dist. Здесь есть версии разработки и сжатые версии, а ссылки по умолчанию на версию разработки достаточно.
Передняя часть в основном обрабатывает проверки прозвища ввода, обработку сообщений, и полный код заключается в следующем:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<title> socket.io Chat Room Пример </title>
<meta charset = "utf-8">
<link rel = "stylesship" href = "css/reset.css"/>
<link rel = "styleSheet" href = "css/bootstrap.css"/>
<link rel = "styleSheet" href = "css/app.css"/>
</head>
<тело>
<div>
<div id = "Chat">
<ul id = "CHAT_CONATENER">
</ul>
</div>
<div>
<Textarea> </textarea>
<Button Id = "clear"> Excreen </button>
<Button Id = "Send"> Отправить </button>
</div>
</div>
<script type = "text/javascript" src = "js/socket.io.js"> </script>
<script type = "text/javascript">
var ws = io.connect ('http://172.16.2.184:8888');
var sendmsg = function (msg) {
ws.emit ('send.message', msg);
}
var addMessage = function (from, msg) {
var li = document.createElement ('li');
li.innerhtml = '<pan>' + from + '</span>' + ':' + msg;
document.queryselector ('#CHAT_CONATENER'). AppendChild (li);
// Установите полосу прокрутки в области содержания внизу
document.queryselector ('#chat'). scrolltop = document.queryselector ('#Chat'). Scrollheight;
// и установить фокус
document.queryselector ('textarea'). Focus ();
}
var send = function () {
var ele_msg = document.queryselector ('textarea');
var msg = ele_msg.value.replace ('/r/n', '') .trim ();
console.log (msg);
if (! msg) return;
sendmsg (msg);
// Добавить сообщение в свою область контента
addmessage ('you', msg);
ele_msg.value = '';
}
ws.on ('connect', function () {
var nickname = window.prompt ('Введите свой прозвище!');
while (! Прозвище) {
Nickname = window.prompt («Прозвище не может быть пустым, пожалуйста, повторно введите!»)
}
ws.emit ('Join', прозвище);
});
// есть дубликаты прозвища
ws.on ('псевдоним', function () {
var nickname = window.prompt ('«Прозвище имеет дубликаты, пожалуйста, повторно введите!»);
while (! Прозвище) {
Nickname = window.prompt («Прозвище не может быть пустым, пожалуйста, повторно введите!»)
}
ws.emit ('Join', прозвище);
});
ws.on ('send.message', function (from, msg) {
addmessage (от, msg);
});
ws.on ('объявление', function (from, msg) {
addmessage (от, msg);
});
document.queryselector ('textarea'). addeventListener ('keypress', function (event) {
if (event.which == 13) {
отправлять();
}
});
document.queryselector ('textarea'). addeventlistener ('keydown', function (event) {
if (event.which == 13) {
отправлять();
}
});
document.queryselector ('#send'). addeventlistener ('click', function () {
отправлять();
});
document.queryselector ('#clear'). addeventListener ('click', function () {
document.queryselector ('#CHAT_CONATENER'). innerHtml = '';
});
</script>
</body>
</html>
Здесь предоставлен полный файл сжатия кода
Суммировать
Nodejs - это хорошая вещь, особенно когда дело доходит до обработки сообщений и программирования сети, естественного асинхронного IO.