I have a Apache server and node server.
In Apache server my actual website running. And I need to include the chat application in my website which was running at node server with socket.io concept. How I include chat app in my website page.
The Problem was How to include another domain page in the website.
The following page running at my apache server.
<div id="mysitecontent" style="width:500px;height:500px;border:1px solid blue;float:left;">
Welcome to my website.
Here the news.
<ul>
<li>1.news1</li>
<li>2.news2</li>
....
</ul>
</div>
<div id="chatcontent" style="width:500px;height:500px;border:1px solid blue;float:right;">
<!-- Here I need to add the Chat application -->
Here I need to add chat application.
</div>the following code running at Node server.
var express=require('express'),
app=express(),
server=require('http').createServer(app),
io=require('socket.io').listen(server);
users={};
app.use('/', express.static(__dirname + '/'));
server.listen(3000);
app.get('/',function(req,res){
res.sendFile(__dirname+'/index.html');
});
io.sockets.on('connection',function(socket){
socket.on('new user',function(data,callback){
if(data in users)
{
callback(false);
}
else{
callback(true);
socket.nickname=data;
socket.sairam='sai';
users[socket.nickname]=socket;
console.log(users);
updateNicknames();
}
});
socket.on('sairam event',function(data,callback){
});
socket.on('send message',function(data,callback){
var msg=data.trim();
if(msg.substr(0,3)==='/w '){
msg=msg.substr(3);
var ind=msg.indexOf(' ');
if(ind !=-1){
var name=msg.substring(0,ind);
var msg=msg.substring(ind+1);
if(name in users){
users[name].emit('whisper',{msg:msg,nick:socket.nickname});
}else{
callback('error enter a valid user.');
}
}
else{
callback('Error ! please enter a message for your whisper.');
}
}
else{
io.sockets.emit('new message',{msg:msg,nick:socket.nickname});
}
});
function updateNicknames(){
io.sockets.emit('usernames',Object.keys(users));
}
socket.on('disconnect',function(data){
if(!socket.nickname) return;
delete users[socket.nickname];
updateNicknames();
});
});The node server return page index.html
The following code was index.html
<htmL>
<head>
<title>Chat with socket.io and node.js</title>
<style>
#chat{
height:500px;
}
#contentWrap{
display:none;
}
#chatWrap
{float:left;
border:1px solid blue;
}
.error{
color:red;
}
.whisper{
color:gray;
font-style:italic;
}
</style>
</head>
<body>
<div id="nickWrap">
<p>Enter a username:</p>
<p id="nickError"></p>
<form id="setNick">
<input size="35" id="nickname"></input>
<input type="submit"></input>
</form>
</div>
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
<form id="send-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
</div>
<div id="users"></div>
</div>
<script src="public/jquery.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script>
jQuery(function($){
var socket=io.connect();
var $messageForm=$('#send-message');
var $nickForm=$('#setNick');
var $nickError=$('#nickError');
var $nickBox=$('#nickname');
var $messageBox=$('#message');
var $chat=$('#chat');
var $users=$('#users');
$nickForm.submit(function(e){
e.preventDefault();
socket.emit('new user',$nickBox.val(),function(data,callbac){
if(data){
$('#nickWrap').hide();
$('#contentWrap').show();
}
else
{
$nickError.html('That username is already taken! Try again');
}
});
$nickBox.val('');
});
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message',$messageBox.val(),function(data){
$chat.append('<span class="error">'+data+'</span><br/>');
});
$messageBox.val('');
});
socket.on('usernames',function(data){
var html='';
for(i=0;i<data.length;i++)
{
html+=data[i]+'<br/>';
}
$users.html(html);
});
socket.on('new message',function(data){
$chat.append('<span class="msg"><b>'+data.nick+':</b>'+data.msg+'</span><br/>');
});
socket.on('whisper',function(data){
$chat.append('<spam class="whisper"><b>'+data.nick+':</b>'+data.msg+'</span><br/>');
});
});
</script>
</body>
</html>