This is my webpage...
Open Lightbox
Showing posts with label Web expression. Show all posts
Showing posts with label Web expression. Show all posts
Tuesday, August 20, 2013
Saturday, June 22, 2013
Node.js Server code to Send and Recieve a Json file. Also A Simple Calculator in Node.js Client Server code in node.js Using Express Framework and Socket.IO
App.js code
///////////////var express = require('express')
, app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server)
var file= require('./data'); // Gets the JSON data file
server.listen(8765);
console.log("Server Listening on 8765");
// routing
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
// usernames which are currently connected to the chat
var usernames = {};
io.sockets.on('connection', function (socket) {
// when the client emits 'sendchat', this listens and executes
socket.on('sendchat', function (data) {
// we tell the client to execute 'updatechat' with 2 parameters
io.sockets.emit('updatechat', socket.username, data);
});
//////////////////////////////////////////////////////////////
socket.on('add', function (data1,data2) {
var n = parseInt(data1);
var n2= parseInt(data2);
socket.emit('fill', n+n2);
});
/////////////////////////////////////////////////////////////
socket.on('readjson',function(datajson){
datajson=JSON.stringify(file);
socket.emit('filljs',datajson)
});
/////////////////////////////////////////////////////////////
// when the client emits 'adduser', this listens and executes
socket.on('adduser', function (username) {
// we store the username in the socket session for this client
socket.username = username;
// add the client's username to the global list
usernames[username] = username;
// echo to client they've connected
socket.emit('updatechat', 'SERVER', 'you have connected');
// echo globally (all clients) that a person has connected
socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected');
// update the list of users in chat, client-side
io.sockets.emit('updateusers', usernames);
});
///////////////////////
socket.on('uploaded',function(js){
var file=JSON.stringify(js);
console.log(file)});
//////////////////////
// when the user disconnects.. perform this
socket.on('disconnect', function () {
// remove the username from global usernames list
delete usernames[socket.username];
// update list of users in chat, client-side
io.sockets.emit('updateusers', usernames);
// echo globally that this client has left
socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
});
});
//////////////////////////////////////
Html Code of Client named index.html
/////////////////////////////
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var socket = io.connect('http://localhost:8765');
// on connection to server, ask for user's name with an anonymous callback
socket.on('connect', function(){
// call the server-side function 'adduser' and send one parameter (value of prompt)
socket.emit('adduser', prompt("What's your name?"));
////////////////////////
///////////////////////
});
// listener, whenever the server emits 'updatechat', this updates the chat body
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
});
////////////////////////////////////
socket.on('fill',function(data){
$('#txt').append("Result is :"+data);
});
socket.on('filljs',function(data){
//if(data!='')
$('#jsn').append(data);
});
//////////////////////////////////////
// listener, whenever the server emits 'updateusers', this updates the username list
socket.on('updateusers', function(data) {
$('#users').empty();
$.each(data, function(key, value) {
$('#users').append('<div>' + key + '</div>');
});
});
// on load of page
$(document).ready(function() {
// when the client clicks SEND
$('#datasend').click( function() {
var message = $('#data').val();
var message2 = $('#data2').val();
$('#data').val('');
$('#data2').val('');
$('#txt').empty();
// tell server to execute 'sendchat' and send along one parameter
// socket.emit('sendchat', message);
socket.emit('add',message,message2);
});
/////////////////////////////
$('#rdr').click(function(){
socket.emit('readjson');
});
/////////////////////////////
// when the client hits ENTER on their keyboard
$('#data').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
}
});
/////////////////////////////////////////////
$('#upload').bind("click",function()
{
var imgVal = $('#uploadImage').val();
// document.getElementById("#uploadImage").files[0];
socket.emit('uploaded',imgVal);
});
////////////////////////////////////////////
});
</script>
<html>
<head>
<link rel="stylesheet" type="text/css" href=style.css">
</head>
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
<b>USERS</b>
<div id="users"></div>
</div>
<div style="float:left;width:400px;height:250px;overflow:scroll-y;padding:10px;">
<div id="conversation"></div>
<p>
<input id="data" style="width:200px;" />
<input id="data2" style="width:200px"/>
</p>
<p>
<input type="button" id="datasend" value="send";
style="width:100;height:50" />
<br>
<textarea name="text" id="txt"></textarea>
</p>
<p>
<textarea name="jsn" id="jsn" rows="10" cols="50"></textarea></p>
<input id="rdr" type="button" value="Read Json" style="width:100;height:50"/>
<!-- <input type="submit" size="40">-->
</div>
<input type="file" name="image" id="uploadImage" size="30" />
<input type="submit" name="upload" id="upload" class="send_upload" value="upload" />
<html>
Saturday, June 1, 2013
On mouse over THE text box is filled with the specific body join Image MAp in html
<html>
<head>
<script type="text/javascript">
function ear(txt){document.getElementById("ear").innerHTML=txt;}
function eye(txt){document.getElementById("eye").innerHTML=txt;}
function mouth(txt){document.getElementById("mouth").innerHTML=txt;}
function elbow(txt){document.getElementById("elbow").innerHTML=txt;}
function arm(txt){document.getElementById("arm").innerHTML=txt;}
function knee(txt){document.getElementById("knee").innerHTML=txt;}
function foot(txt){document.getElementById("foot").innerHTML=txt;}
function leg(txt) { document.getElementById("leg").innerHTML=txt;}
function hand(txt) { document.getElementById("hand").innerHTML=txt;}
function shoulder(txt) { document.getElementById("shoulder").innerHTML=txt;}
function nose(txt) { document.getElementById("nose").innerHTML=txt;}
function hair(txt) { document.getElementById("hair").innerHTML=txt;}
</script>
<style type="text/css">
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="image" align="center">
<map name="Image_map">
<area shape ="rect" coords ="234, 205, 244, 224"onmouseover="ear('Ear.')"/>
<area shape ="rect" coords ="252, 216, 265, 223"onmouseover="eye('Eye.')" />
<area shape="rect" coords="255, 244, 274, 252" onmouseover="mouth('Mouth.')" />
<area shape="circ" coords="211, 331, 9" onmouseover="elbow('Elbow.')" />
<area shape="rect" coords="245, 371, 263, 389" onmouseover="arm('Arm.')" />
<area shape="rect" coords="226, 459, 243, 475" onmouseover="knee('Knee.')" />
<area shape="rect" coords="278, 541, 329, 561" onmouseover="foot('Foot.')" />
<area shape="rect" coords="278, 480, 302, 499" onmouseover="leg('Leg.')" />
<area shape="rect" coords="265, 343, 294, 361" onmouseover="hand('Hand.')" />
<area shape="rect" coords="273, 261, 294, 271" onmouseover="shoulder('Shoulder.')" />
<area shape="circ" coords="268, 236, 7" onmouseover="nose('Nose.')" />
<area shape="circ" coords="295, 200, 22" onmouseover="hair('Hair.')" />
</map>
<img src ="popo.jpg" width ="530" height ="702" alt="Map is not loaded" usemap ="#Image_map" />
<h2 id="ear" style="left: 323; top: 201px; width: 16%; height: 27px;"> </h2>
<h2 id="eye" style="left: 330; top: 263px; width: 15%; height: 20px;"> </h2>
<h2 id="mouth" style="left: 345; top: 330px; width: 15%; height: 25px" ></h2>
<h2 id="elbow" style="left: 343; top: 387px; width: 15%" ></h2>
<h2 id="arm" style="left: 334; top: 452px; width: 15%; height: 20px" ></h2>
<h2 id="knee" style="left: 334; top: 510px; width: 15%" ></h2>
<h2 id="foot" style="left: 652; top: 511px; width: 15%" ></h2>
<h2 id="leg" style="left: 655; top: 451px; width: 14%" ></h2>
<h2 id="hand" style="left: 663; top: 388px; width: 14%" ></h2>
<h2 id="shoulder" style="left: 687; top: 330px; width: 13%" ></h2>
<h2 id="nose" style="left: 661; top: 262px; width: 14%" ></h2>
<h2 id="hair" style="left: 661; top: 201px; width: 14%" ></h2>
</div>
<p id="desc">Mouse over the different body parts and see their names.</p>
</body>
</html>
Subscribe to:
Posts (Atom)