Node.js porty

pytanie zadane 18 lutego 2018 w JavaScript przez Yashe Dyskutant (7,720 p.)

Witam,

Mam pewien problem dotyczących portów.Stworzyłem na stronie chat, lecz..... Mój serwer XAMPP działa na domyślnym porcie 80... Serwer NODE.JS działa na 3000.

Uruchamiam moją stronę przez xampp'a i automatycznie go wyłączam. W sekcji body znajduje się nasłuchiwanie socket.io. Później uruchamiam node.js na porcie 80 i ustawiłem tam jakąś stronę do chatu na szybko. Gdy wtedy wpiszę coś do tej strony, to na stronie z xampp'a której nie odłączałem widać real-time zmiany. Jak osiągnąc efekt, aby wszystko działało na mojej podstawowej stronie ?

Node.js

Nie chce mi czytać pliku .php - a takie rozszerzenie ma mój główna strona (pobiera plik, zamiast wczytać)

Schemat problemu, gdyby ktoś nie zrozumiał:

Uruchamiam xampp'a -> Odpalam stronę chat.php -> Wyłączam xampp'a -> Uruchamiam w cmd "node index.js" znajdujący się w osobnym pliku na porcie :80 -> Odpalam index.html z tego samego pliku -> Wpisując coś w prostym formularzu w index.html zmiany pojawiają się na stronie z xampp'a

SS:

Bardzo proszę o pomoc

1 odpowiedź

odpowiedź 18 lutego 2018 przez szustka124 Gaduła (4,380 p.)
wybrane 19 lutego 2018 przez Yashe

Najlepsza

Dlaczego chcesz mieszać dwa języki backendowe? Masz jakiś konkretny powód? Tworząc chat w czasie rzeczywistym, nie lepiej skupić się na samym Node?

komentarz 18 lutego 2018 przez ProgramistaStepek Nałogowiec (27,020 p.)

Praktycznie to samo chciałem napisać :) Node.js do aplikacji real-time jest idealny i nie ma sensu mieszać tego z PHP.

komentarz 18 lutego 2018 przez Yashe Dyskutant (7,720 p.)

No rozumiem, lecz powiedzmy, że mam plik chat.php, w nim if's który sprawdza czy ktoś jest zalogowany i ta infomacja wyświetla się w postaci div'a na stronie. Nie da się inaczej tego zaimplementować niż php'em

Nawet gdy zmienię stronę i będzie to chat.html to dalej nie rozwiązuje to moich problmeów z portami, w internecie wyczytałem, że node.js i xampp mogą wspólpracować, i na tym mi najbardziej zależy. Chyba, że czegoś nie rozumiem i node.js jako serwer również oferuje opcje gdzie wrzucę wszystkie pliki strony i uruchomię je na localhoscie (wraz z plikami .php)

komentarz 18 lutego 2018 przez szustka124 Gaduła (4,380 p.)
edycja 18 lutego 2018 przez szustka124

Serwer Apache(odpalany przez XAMPP) i Node to dwie różne rzeczy. Nie należy robić z nimi tego, co zamierzasz. Myślę, że przy tym projekcie powinieneś porzucić PHP. Połączenie jest możliwe, ale ma mało sensu. Wszystko czego chcesz, jest do zrobienia w JS.

Do autoryzacji możesz użyć na przykład PassportJS.

Twój pomysł na autoryzację w PHP jest bardzo prosty do złamania. Wystarczy samemu podłączyć się do socket.io, z własnej aplikacji, omijając tym samym, system logowania.

komentarz 18 lutego 2018 przez szustka124 Gaduła (4,380 p.)

Jeżeli nic się nie zmieniło, nadal chcesz stworzyć ruletkę. Jest specjalny moduł do logowania za pomocą Steam.

komentarz 18 lutego 2018 przez Yashe Dyskutant (7,720 p.)

Tak, tak słyszałem również o logowaniu poprzez STEAM API.. to nie byłoby głupie, lecz moim założeniem było zrobienie strony rozrywkowej a nie hazardowej. Możliwe, że zastosuje się do waszych rad.. za które szczerze dziękuje.

Jeszcze mam problem z style.css gdy próbuje go podpiąć do index.html. Odpalając

node index.js

Na stronie index.html (tej od klienta) nic się nie pojawia jeżeli chodzi o style. Jedynie te wpisane w tagach <style>..</style> działają, wie ktoś z jakiego powodu tak się dzieje ?

komentarz 18 lutego 2018 przez szustka124 Gaduła (4,380 p.)

Pokaż kod.

komentarz 18 lutego 2018 przez Yashe Dyskutant (7,720 p.)

Tutaj index.js:

var express = require('express'),
  app = express(),
  server = require('http').createServer(app),
  io = require('socket.io').listen(server);
 
server.listen(process.env.PORT || 80);
 
app.get('/',function(req,res){
  res.sendFile(__dirname+'/index.html');
});

io.sockets.on('connection', function (socket) {
 
   console.log("Socket connected.");
 
   socket.on('message', function(msg){
     io.emit('message', msg);
   });
  
});

Tutaj index.html:

<!DOCTYPE html>
<html>
   <head>
		<title>Chat</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
 
		* { 
			margin: 0;
			padding: 0;
			box-sizing: border-box; 
		}
 
		body {
         font: 13px Helvetica, Arial;
		}
 
		form {
			background: #333;
			padding: 5px;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
 
		form input {
			border: 0;
			padding: 10px;
			width: 90%;
			margin-right: .5%;
		}
 
		form button {
			width: 9.5%;
			background: #ccc;
			font-size: 12px;
			border: none;
			padding: 10px 0;
		}
 
		#messages {
			list-style-type: none;
			margin: 0;
			padding: 0;
		 }
	 
		#messages li {
			padding: 10px 12px;
			font-size: 14px;
		}
	 
		#messages li:last-child {
			margin-bottom: 43px;
		}
	 
		#messages li:nth-child(odd) {
			background: #ddd;
		}
	 
		#messages li:nth-child(even) {
			background: #bbb;
		}
 
   </style>
</head>
 
<body>
   <ul id="messages"></ul>
 
   <form action="">
      <input id="msg" autocomplete="off" /><button>Wyslij</button>
   </form>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script>

var socket = io();
 
$('form').submit(function(){
   socket.emit('message', $('#msg').val());
   $('#msg').val('');
   return false;
});
 
socket.on('message', function(msg){
   $('#messages').append($('<li>').text(msg));
   $("html, body").scrollTop($(document).height());
});

</script>
</body>
</html>

komentarz 18 lutego 2018 przez szustka124 Gaduła (4,380 p.)

W routingu, jedyne co zadeklarowałeś to wysłanie index.html po wejściu na stronę główną. Żaden inny plik nie ma możliwości opuszczenia serwera. Mógłbyś dodawać routing dla każdego pliku osobno:

app.get('/style.css',function(req,res){
  res.sendFile(__dirname+'/style.css');
});

I to zadziała, ale im więcej plików, tym gorzej to będzie wyglądać. Najlepszym rozwiązaniem będzie przeniesienie plików frontendowych do osobnego folderu i skorzystanie z wysyłania plików statycznych dla całego folderu. Od teraz, wszystko co się w nim znajduje, będzie dostępne dla użytkowników (jak htdocs w XAMPP).