14 |
23 | Chat application - using node.js and socket.io
15 |Please enter your name below and click 'Join' or hit the 'Enter' key.
16 | 22 |
12 |
13 |
24 |
25 |
26 |
56 |
57 |
58 |
59 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/public/js/client.js:
--------------------------------------------------------------------------------
1 | /* HTML5 magic
2 | - GeoLocation
3 | - WebSpeech
4 | */
5 |
6 | //WebSpeech API
7 | var final_transcript = '';
8 | var recognizing = false;
9 | var last10messages = []; //to be populated later
10 |
11 | if (!('webkitSpeechRecognition' in window)) {
12 | console.log("webkitSpeechRecognition is not available");
13 | } else {
14 | var recognition = new webkitSpeechRecognition();
15 | recognition.continuous = true;
16 | recognition.interimResults = true;
17 |
18 | recognition.onstart = function() {
19 | recognizing = true;
20 | };
21 |
22 | recognition.onresult = function(event) {
23 | var interim_transcript = '';
24 | for (var i = event.resultIndex; i < event.results.length; ++i) {
25 | if (event.results[i].isFinal) {
26 | final_transcript += event.results[i][0].transcript;
27 | $('#msg').addClass("final");
28 | $('#msg').removeClass("interim");
29 | } else {
30 | interim_transcript += event.results[i][0].transcript;
31 | $("#msg").val(interim_transcript);
32 | $('#msg').addClass("interim");
33 | $('#msg').removeClass("final");
34 | }
35 | }
36 | $("#msg").val(final_transcript);
37 | };
38 | }
39 |
40 | function startButton(event) {
41 | if (recognizing) {
42 | recognition.stop();
43 | recognizing = false;
44 | $("#start_button").prop("value", "Record");
45 | return;
46 | }
47 | final_transcript = '';
48 | recognition.lang = "en-GB"
49 | recognition.start();
50 | $("#start_button").prop("value", "Recording ... Click to stop.");
51 | $("#msg").val();
52 | }
53 | //end of WebSpeech
54 |
55 | /*
56 | Functions
57 | */
58 | function toggleNameForm() {
59 | $("#login-screen").toggle();
60 | }
61 |
62 | function toggleChatWindow() {
63 | $("#main-chat-screen").toggle();
64 | }
65 |
66 | // Pad n to specified size by prepending a zeros
67 | function zeroPad(num, size) {
68 | var s = num + "";
69 | while (s.length < size)
70 | s = "0" + s;
71 | return s;
72 | }
73 |
74 | // Format the time specified in ms from 1970 into local HH:MM:SS
75 | function timeFormat(msTime) {
76 | var d = new Date(msTime);
77 | return zeroPad(d.getHours(), 2) + ":" +
78 | zeroPad(d.getMinutes(), 2) + ":" +
79 | zeroPad(d.getSeconds(), 2) + " ";
80 | }
81 |
82 | $(document).ready(function() {
83 | //setup "global" variables first
84 | var socket = io.connect("127.0.0.1:3000");
85 | var myRoomID = null;
86 |
87 | $("form").submit(function(event) {
88 | event.preventDefault();
89 | });
90 |
91 | $("#conversation").bind("DOMSubtreeModified",function() {
92 | $("#conversation").animate({
93 | scrollTop: $("#conversation")[0].scrollHeight
94 | });
95 | });
96 |
97 | $("#main-chat-screen").hide();
98 | $("#errors").hide();
99 | $("#name").focus();
100 | $("#join").attr('disabled', 'disabled');
101 |
102 | if ($("#name").val() === "") {
103 | $("#join").attr('disabled', 'disabled');
104 | }
105 |
106 | //enter screen
107 | $("#nameForm").submit(function() {
108 | var name = $("#name").val();
109 | var device = "desktop";
110 | if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
111 | device = "mobile";
112 | }
113 | if (name === "" || name.length < 2) {
114 | $("#errors").empty();
115 | $("#errors").append("Please enter a name");
116 | $("#errors").show();
117 | } else {
118 | socket.emit("joinserver", name, device);
119 | toggleNameForm();
120 | toggleChatWindow();
121 | $("#msg").focus();
122 | }
123 | });
124 |
125 | $("#name").keypress(function(e){
126 | var name = $("#name").val();
127 | if(name.length < 2) {
128 | $("#join").attr('disabled', 'disabled');
129 | } else {
130 | $("#errors").empty();
131 | $("#errors").hide();
132 | $("#join").removeAttr('disabled');
133 | }
134 | });
135 |
136 | //main chat screen
137 | $("#chatForm").submit(function() {
138 | var msg = $("#msg").val();
139 | if (msg !== "") {
140 | socket.emit("send", new Date().getTime(), msg);
141 | $("#msg").val("");
142 | }
143 | });
144 |
145 | //'is typing' message
146 | var typing = false;
147 | var timeout = undefined;
148 |
149 | function timeoutFunction() {
150 | typing = false;
151 | socket.emit("typing", false);
152 | }
153 |
154 | $("#msg").keypress(function(e){
155 | if (e.which !== 13) {
156 | if (typing === false && myRoomID !== null && $("#msg").is(":focus")) {
157 | typing = true;
158 | socket.emit("typing", true);
159 | } else {
160 | clearTimeout(timeout);
161 | timeout = setTimeout(timeoutFunction, 5000);
162 | }
163 | }
164 | });
165 |
166 | socket.on("isTyping", function(data) {
167 | if (data.isTyping) {
168 | if ($("#"+data.person+"").length === 0) {
169 | $("#updates").append("
27 |
30 |
31 |
52 |
32 |
34 |
51 |
53 |
55 |