CODEWITHSUNDEEP
javascriptnode.jsvpn
User
User

Reputation: 1488

implement Nodejs app in already existing website

I want to place a chatroom I've crated in Node.js into an already existing website. Node.js has already been installed to my LAMP server and I've tried the app by uploading it to the root directory and testing that it works by accessing it from typing the address to my site followed by the port :3000

Inside my VPNs www/html directory I have a folder called chat which I want to become my chat website.

In here I have a file called index.php which serves me as my login and register page and when logged in you will be redirected to home.php, which is the location I want my NodeJs chat to be placed.

My page currently looks like this:

enter image description here

The whitespace you can see under the blue bar is the place I want my chat to appear.

So first of all my question is how to actually get my Node.js application to run in this target area and then my question would be how to make my node application to be visible in this specific area.

To make things simple I've reduced my code to the Socket.io example chat code.

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

app.get('/', function(req, res){
  res.sendFile(__dirname + '/chat.html');
  //Behlver itne senda html igentligen kan bara skriva hela koden i 
  // min home.php fil tillsammans med alla scripts etc etc
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

And the html document that it sends called chat.html looks simple as this:

<div class="chatWrapper">
	<ul id="messages">
	
		
	</ul>
	<form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
</div>

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
</script>

Upvotes: 0

Views: 1722

Answers (1)

Brent
Brent

Reputation: 23702

I'd put an iframe on your chat.php page that points to your node chat.html.

<iframe src="http://example.com:3000/chat.html"></iframe>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Upvotes: 1

Related Questions