` on your html file(s)
37 |
38 | 3. Run the app.js `node app.js`
39 |
40 | 4. Open your website (there should now be a help tab on the right of your page)
41 |
42 | 5. Enter in a key, then click the Create Key button.
43 |
44 | 6. Open up another browser page to `http://localhost:3000/admin.html`
45 |
46 | 7. On the admin page type the key you created on your site and hit enter
47 |
48 | > Now you should be able to see exactly what is happening on the client screen. There are still plenty of bugs with this application but it is in a usable state for anyone to begin playing with.
49 |
50 | ##TODOs:
51 |
52 | 1. Configure mutation observers to send over only affected DOM elements **(completed)**
53 |
54 | 2. Configure Mutation observers to detect removal and addition of DOM elements **(completed)**
55 |
56 | 3. Detect scrolling and emulate on admin side **(completed)**
57 |
58 | 4. Correct mouse pointer offset **(completed)**
59 |
60 | 5. Find proper way to hard code currently computed css to each element before initial sendscreen **(completed)**
61 |
62 | 6. Correct issues with dynamically loaded scripts not working across all browsers **(not started)**
63 |
64 | 7. Support multi page sites **(working but still a little buggy)**
65 |
66 | 8. IE support **(started, chrome frame flow working for IE, Tested WebRTC working as well)**
67 |
68 | 9. Full mobile support **(not started, currently works for Chrome and Firefox on Android)**
69 |
70 | 10. Fix issues with proper scrolling to top **(not started)**
71 |
72 | 11. Add SSL support **(not started)**
73 |
74 | 12. Harden socket access/Security **(not started)**
75 |
76 | 13. Service clustering **(not started)**
77 |
78 | 14. Logging **(not started)**
79 |
80 | 15. Handle local images **(started, added commented out code to handle relative images)**
81 |
82 | 16. Relative to absolute paths **(see above, still need to work on unaccessable css and scripts)**
83 |
84 | 17. Script optimization with minification, consolidation and compression **(not started)**
85 |
86 |
87 |
88 | ##Future Plans:
89 |
90 | 1. Integrate streaming audio
91 |
92 | 2. Chat integration
93 |
94 | 3. Video integration **(WebRTC)**
95 |
96 | 4. Queue system for routing to appropriate personel
97 |
98 | 5. Ability to view/manipulate iframe content
99 |
100 | 6. Record and playback functionality
101 |
102 |
103 |
104 | ##Credits
105 |
106 |
107 |
108 | ###Client
109 |
110 | This application makes use of the [mutation-summary](http://code.google.com/p/mutation-summary/) library developed by Rafael Weinstein.
111 |
112 | The ever so awesome [jQuery](http://jquery.com) library.
113 |
114 | [sessvars](http://www.thomasfrank.se/sessionvars.html) by Thomas Frank.
115 |
116 | [Chrome Frame](https://developers.google.com/chrome/chrome-frame/) by Google which is an IE plugin to allow IE users to have all the advantages of using Chrome
117 |
118 | ###Server
119 |
120 | [NodeJS](http://nodejs.org) - Server side JavaScript.
121 |
122 | [Socket.io](http://socket.io) - Library for NodeJS that does an awesome job at handling websockets.
123 |
124 | [Express](http://expressjs.com) - Extremely powerful web framework for NodeJS.
125 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var http = require('http');
2 | var express = require('express');
3 | var app = express();
4 | var server = http.createServer(app).listen(3001);
5 | var io = require('socket.io').listen(server);
6 | io.set('log level', 1);
7 | io.set('transports', ['websocket']);
8 |
9 | app.configure(function(){
10 | app.use(function(req, res, next) {
11 | res.setHeader("X-UA-Compatible", "chrome=1");
12 | return next();
13 | });
14 | app.use(express.static(__dirname + '/public'));
15 | });
16 | io.sockets.on('connection', function(socket) {
17 | socket.on('CreateSession', function(msg){
18 | socket.join(msg);
19 | });
20 | socket.on('PageChange', function(msg){
21 | socket.join(msg);
22 | io.sockets.in(msg).emit('SessionStarted', '');
23 | console.log('PageChange');
24 | });
25 | socket.on('JoinRoom', function(msg){
26 | socket.join(msg);
27 | io.sockets.in(msg).emit('SessionStarted', '');
28 | });
29 | socket.on('ClientMousePosition', function(msg){
30 | socket.broadcast.to(socket.room).emit('ClientMousePosition', {PositionLeft:msg.PositionLeft, PositionTop:msg.PositionTop});
31 | });
32 | socket.on('AdminMousePosition', function(msg){
33 | socket.broadcast.to(msg.room).emit('AdminMousePosition', {PositionLeft:msg.PositionLeft, PositionTop:msg.PositionTop});
34 | });
35 | socket.on('changeHappened', function(msg){
36 | socket.broadcast.to(msg.room).emit('changes', msg.change);
37 | });
38 | socket.on('DOMLoaded', function(msg){
39 | socket.broadcast.to(msg.room).emit('DOMLoaded', '');
40 | });
41 | });
42 | app.listen(3000);
--------------------------------------------------------------------------------
/public/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dvideby0/screenshare/9f3a19a3db6eb964de95731bafb613c48a8ec129/public/.DS_Store
--------------------------------------------------------------------------------
/public/admin.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | 4 |
5 |
6 |
7 |