1

Запускаю сервер на 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>

1
  • а причем тут тег Linux?
    – Hellseher
    24 янв 2018 в 13:23

1 ответ 1

2

Вот тут - server.on('request', function(request, response){ вы должны обработать запрос и вернуть правильный файл. Текущая ваша реализация всегда возвращает одно и то же - это, разумеется, неправильно.

Скорее всего, вы свою реализацию взяли из какого-то примера по socket.io, но не учли что примеры по socket.io показывают вам как обрабатывать сообщения а не как хостить сайт. Хостинг сайта - это базовое знание, предполагается что вы уже умеете это делать до того как начнете работать с socket.io.


Запрос от пользователя можно разобрать вручную, в чем поможет документация. Но проще всего воспользоваться каким-нибудь фреймворком, например express (требует установки через npm):

var express = require('express');
var http    = require('http');
var socketio= require('socket.io');

var app     = express();
var server  = http.createServer(app);
var io      = socketio(server);

// ...

app.use(express.static(path.join(__dirname, 'public'));

Настроенный таким образом сервер будет пытаться в ответ на любой запрос отдать файл из директории public в вашем проекте если там такой файл там есть.

Если нет желания тащить целый фреймворк - можно подключить отдельно пакеты serve-static и finalhandler.

var finalhandler  = require('finalhandler')
var serveStatic   = require('serve-static')
var http          = require('http');
var socketio      = require('socket.io');

var staticHandler = serveStatic(path.join(__dirname, 'public'));
var server = http.createServer(function onRequest (req, res) {
  staticHandler(req, res, finalhandler(req, res))
})
var io            = socketio(server);

// ...

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.