Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Разработка серверной части
Установив nodejs, создадим папку, к которой будет распологаться проект чата. В папке с проектом создадим папку server. В ней и будет располагаться код чата. В папке server установим необходимые модули.
Как уже говорилось ранее, для разработки клиент-серверного чата, мы будем использовать сокеты и библиотеку Socket.io. Для установки и подключения к Node.js будет использован встроенный пакетный менеджер npm. Также, для передачи пакетов, будет использован порт 8008.
Структура серверной части такова: сервер принимает сообщение и рассылает его всем пользователям.
ЗАКЛЮЧЕНИЕ.
Был реализован программный продукт, позволяющий передавать сообщения по сети Интернет между пользователями.
При выполнении данной курсовой работы были освоены основы веб-программирования, получены навыки работы с Node.js, Socket.io и JQuery.
Приложение имеет дружелюбный и простой интерфейс, чтобы пользователь смог быстро разобраться, как она работает, и оценить функциональное удобство системы.
СПИСОК ИСТОЧНИКОВ
Практические пособия и руководства
1. Сухов К. Node.js. Путеводитель по технологии. 2015. - «ДМК-Пресс», 2015 – 416 c.: ил.
2. Макфарланд Д. С. JavaScript и jQuery. Исчерпывающее руководство – «O'Reilly», 2015 – 880c.: ил.
3. Пауэрс Ш. Изучаем Node.js «O'Reilly», 2013 – 400c.: ил.
4. Фримен Э., Робсон Э. Изучаем программирование на JavaScript, «O'Reilly», 2013 – 640c.: ил.
5. Бибо Б., Кац И. jQuery. Подробное руководство по продвинутому JavaScript, 2-е издание, 2011 – 624с.: ил.
6. Хэррон Д. Node.js Разработка серверных веб-приложений на JavaScript «ДМК-Пресс», 2012 – 416 c.: ил.
7. Макфарланд Д. С. Новая большая книга CSS – «O'Reilly», 2016 – 720c.: ил.
8. Фримен А. jQuery 2.0 для профессионалов – «Apress», 2015 – 1040с.: ил.
9. Фримен Э., Робсон Э. Изучаем HTML, XHTML и CSS, «O'Reilly», 2016 – 720c.: ил.
10. Стефанов С., JavaScript. Шаблоны, «O'Reilly», 2011 – 272c.: ил.
Электронные ресурсы
11. Hello world c помощью nodejs и express [Электронный ресурс]. URL: http://www.itlessons.info/nodejs/hellow-world-with-nodejs-and-express/ (Дата обращения 24.02.2016)
12. Простой чат с помощью nodejs и socket.io [Электронный ресурс]. URL: http://www.itlessons.info/nodejs/simple-chat-with-nodejs-and-socket-io/ (Дата обращения 24.02.2016)
13. Создаем чат на Node.js и Socket.IO [Электронный ресурс]. URL: https://habrahabr.ru/post/127525/ (Дата обращения 24.02.2016)
14. Продвинутый чат на Node.JS [Электронный ресурс]. URL: https://habrahabr.ru/post/200866/ (Дата обращения 24.02.2016)
15. Простой чат на NodeJS и Socket.IO [Электронный ресурс]. URL: http://jslby.github.io/simple-chat-application-using-nodejs-and-socketio.html (Дата обращения 24.02.2016)
16. Самые простые техники адаптивной верстки [Электронный ресурс]. URL: https://habrahabr.ru/post/144003/ (Дата обращения 24.02.2016)
17. Web проект — чат. Что использовать с node.js + socket.io? CSS [Электронный ресурс]. URL: https://toster.ru/q/199761 (Дата обращения 24.02.2016)
18. Примеры из справочника CSS [Электронный ресурс]. URL: http://htmlbook.ru/blog/primery-iz-spravochnika-css (Дата обращения 24.02.2016)
19. Пишем простой чат на Node.js. [Электронный ресурс]. URL: http://www.daspot.ru/2014/02/nodejs.html (Дата обращения 24.02.2016)
20. Адаптивно-отзывчивый: разбираемся в терминологии [Электронный ресурс]. URL: http://frontender.info/adaptive-vs-responsive-terminology/ (Дата обращения 24.02.2016)
ПРИЛОЖЕНИЯ
Листинг 1. Исходный код клиентской части
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<meta name="robots" content="noindex,nofollow"/>
<title>Чат на Node.js и socket.io</title>
</head>
<body>
<div class="contenet">
<div class="header">
<img src="images/logo.png">
<h1>Добро пожаловать. Снова.</h1>
</div>
<div class="chat">
<div class="messages" id="messages"></div>
<div class="panel">
<input type="text" name="nick" class="nick" placeholder="Как вас зовут?">
<input type="text" name="message_text" id="message_text">
<button type="button" id="message_btn">Отправить</button>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://localhost:8008/socket.io/socket.io.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var socket = io.connect('http://localhost:8008');
var messages = $("#messages");
var message_txt = $("#message_text")
$('.chat.nick').text(name);
function msg(nick, message) {
var m = '<div class="msg">' +
'<span class="user">' + safe(nick) + ':</span> '
+ safe(message) +
'</div>';
messages
.append(m)
.scrollTop(messages[0].scrollHeight);
}
function msg_system(message) {
var m = '<div class="msg system">' + safe(message) + '</div>';
messages
.append(m)
.scrollTop(messages[0].scrollHeight);
}
socket.on('connecting', function () {
msg_system('Соединение...');
});
socket.on('connect', function () {
msg_system('Соединение установленно!');
});
socket.on('message', function (data) {
msg(data.name, data.message);
message_txt.focus();
});
function send() {
var text = $("#message_text").val();
var name = $(".nick").val();
if ($("#message_text").val() == "" || $(".nick").val() == "")
return;
message_txt.val("");
socket.emit("message", {message: text, name: name});
};
$("#message_btn").click(function() {
send();
});
$('#message_text').keydown(function(e){
if (e.which==13) send();
});
function safe(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
});
</script>
</body>
</html>
Листинг 2. Дизайн клиентской части на CSS
body {
background-color:#eaeaea;
}
.contenet {
width: 850px;
min-width: 55%;
max-width: 90%;
margin: 3% auto;
padding: 10px;
color: #4F6B72;
font-family: "PT Sans", Verdana, Arial, sans-serif;
font-size: 90%;
background-color:#fff;
border-radius: 10px;
}
.header img {
float: left;
vertical-align: top;
padding-right: 5px;
}
.chat.messages{
height: 300px;
min-height: 55%;
max-height: 90%;
font-size: 120%;
border: 1px solid #d4d4d4;
overflow-y: scroll;
overflow-x: hidden;
padding: 5px;
}
.chat.messages @media screen and (max-width: 768px) {
height: 90%;
}
.chat.messages.user{
color: #B22222;
}
.chat.message{
width: 70%;
}
.chat.panel{
margin-top: 8px;
}
#message_text{
width: 60%;
display: inline-block;
margin-left: 8px;
}
.panel * {
margin-top: 5px;
border-radius: 5px;
font-size: 120%;
}
.panel input {
height: 25px;
border: 1px solid #ccc;
}
#message_btn {
height: 28px;
background-color: #4F6B72;
color: #fff;
border: 0px;
}
Листинг 3. Исходный код серверной части
var PORT = 8008;
var options = {
// 'log level': 0
};
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server, options);
server.listen(PORT);
app.use('/static', express.static(__dirname + '/static'));
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function (client) {
client.on('message', function (message) {
try {
client.emit('message', message);
client.broadcast.emit('message', message);
} catch (e) {
console.log(e);
client.disconnect();
}
});
});
Date: 2016-05-15; view: 572; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |