Запускаю сервер на Socket.io
командой в консоли node index.js
,
захожу на свой сервер в браузере, а тут такая картина:
"стили не применились", а файл со стилями перезаписан.
Как это можно исправить?
index.js
var http = require('http');
var fs = require('fs');
var socketio = require('socket.io');
var html = require('escape-html');
var server = http.createServer();
var io = socketio(server);
var port = process.env.PORT || 3004;
fs.readFile('public/index.html', function(err, html_string){
if (err) {
throw err;
}
io.on('connection', function (socket){
socket.on('message', function(data){
console.log(socket.request.connection.remoteAddress);
socket.broadcast.emit('message', data);// рассылать всем
socket.join('some room');
});
});
server.on('request', function(request, response){
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(html_string);
});
server.listen(port, function(){
console.log('server running port:' + " " + port);
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>socketio</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="transition: all 1s">
<div id="message">
<p id="gretting">welkome</p>
</div>
<div class="panel">
<form method="post" onsubmit="sendMessage(this.nickname.value, this.message.value); this.message.value = ''; return false">
<div class="inputs">
<div class="input-left">
<input type="text" name="message" placeholder="message" autofocus="off" autocomplete="off">
</div>
<div class="input-right">
<input type="text" name="nickname" placeholder="nickname" autofocus="on" autocomplete="off">
</div>
<input type="submit" style="display: none;">
</div>
</form>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" ></script>
<script type="text/javascript">
var messageContainer = document.getElementById('message');
var socket = io({transports: ['websocket']});
socket.on('message', function(data){
console.log(data);
renderMessage(data)
});
function sendMessage(nickname, message){
var messageUser = {};
messageUser.nickname = nickname;
messageUser.message = message;
if (nickname && message) {
socket.emit('message', messageUser);
renderMessage(messageUser);
}
// console.log(messageUser)
}
function renderMessage(data){
var div = document.createElement('div');
div.innerHTML = '<span>' + '<strong>'+ data.nickname +': '+'</strong>' + data.message +'</span>';
div.setAttribute('style','transition:all .4s;color:#ffff;opacity:0;height:0');
messageContainer.insertBefore(div , messageContainer.firstChild);
// data.onload = function(){
// div.setAttribute('style','transition:all 1s;color:#5cb5e2;opacity:1');
// }
setTimeout(function(){
div.setAttribute('style','transition:all 1s;color:#5cb5e2;opacity:1;height:20px;');
}, 0);
// console.log(data.upload);
}
</script>
</body>
</html>