RealTimeWebWithNodeJs/11.html at master · AdarshMaurya/RealTimeWebWithNodeJs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 <!DOCTYPE html>
 <html>
<head>
<title>10.html</title>
<style>
#spy_marker { position:absolute; background-color: red;
              width:10px; height:10px; left:0px, top:0px;
              display: none;
            }
</style>
</head>
<body>
<h1>10.html</h1>
<p id="hello"> </p>

<p>
  <input id="msgtobroadcast"><input type="button" id="dobroadcast" value="send">
</p>
<p id = "broadcast"></p>
<div id="spy_marker"></div>


<input id="typeit"><input type ="button" id="sendit" value="Send Message">
<div id ="messages"></div>


<script src="/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>

function hello(msg){
  document.getElementById("hello").innerHTML= msg;
}

function broadcast(msg){
  document.getElementById("broadcast").innerHTML =
  document.getElementById("broadcast").innerHTML + msg +"<br>";
}

function spy(move){
    $spy_marker.show().css({
      left: (move.x -2) + "px",
      top: (move.y -2) + "px"
    });
}


var socket =io.connect("/", {
  "connect timeout":3000,
  "reconnect": false
});

var $spy_marker = $("#spy_marker");

socket.on("hello", hello);
socket.on("broadcast", broadcast);
socket.on("spy", spy);

$(document).bind("mousemove", function(evt){
    //evt.pageX, evt.pageY
    socket.emit("spy",evt.pageX, evt.pageY);
});

document.getElementById("dobroadcast").addEventListener(
  "click",function(){
    var inp = document.getElementById("msgtobroadcast");
    socket.emit("msg", inp.value);
    inp.value = "";
  },false
);

socket.on("connected", function(){
  console.log("connected");
});

socket.on("disconnect", function(){
  console.log("disconnected");
});

socket.on("hello",function(num){
    document.getElementById("hello").innerHTML= "Hello World: "+num;
});

socket.on("messages", function(msg){
  document.getElementById("messages").innerHTML += msg + "<br>";
});

document.getElementById("sendit").addEventListener("click",
  function(evt){
    var msg = document.getElementById("typeit").value;
    if(msg){
      socket.emit("typeit",msg);
      document.getElementById("messages").innerHTML += msg + "<br>";
    }
  },false);

</script>


</body>
 </html>