Nodejs + websocket real-time chat system, nodejswebsocket
1. This article belongs to the ultimate version.
I am also a real dish, and a websocket Simple Chat System has been hard hit by me for so many days.
It seems that more code will need to be written in the future.
Client.html:
<! DOCTYPE html> <Head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0 "> <meta http-equiv =" X-UA-Compatible "content =" ie = edge "> <title> Document </title> <style>. kuang {width: 600px; min-height: 50px; max-height: 296px; border: 1px solid; float: left; display: block; position: relative; overflow-y: scroll ;}
. Value {width: 200px ;}
. Input {display: block; position: absolute; left: 0; margin-top: 300px ;}</style> <Body> <label> connection User: </label> <input type = "text" id = "name"/> <button id = "conn"> connection </button> <button id = "close"> disconnected </button> <br/> <div class = "kuang" id = "mess"> </div> <div class = "input"> <input type = "text" class = "value" id = "value1"/> <button id = "send"> send </button> </div> <script> var input = document. getElementById ("name"); var conn = document. getElementById ("conn"); var close = document. getElementById ("close"); var mess = document. getElementById ("mess"); var value1 = document. getElementById ("value1"); var pattern =/^ [\ u4e00-\ u9fa5] {2, 10} $ /;
Close. disabled = true; if (window. WebSocket) {conn. onclick = function () {if (! Pattern. test (input. value) {alert ("the name cannot be blank and must be Chinese"); return;} var ws = new WebSocket ('ws: // 127.0.0.1: 8082 '); conn. disabled = true; close. disabled = false; ws. onopen = function (e) {console. log ("successfully connected to the server"); ws. send (input. value); input. setAttribute ("readOnly", 'true'); value1.setAttribute ("readOnly", 'true');} ws. onmessage = function (e) {value1.removeAttribute ("readOnly"); var time = new Date (); mess. innerHTML + = time. toUTCString () + ":" + e. data + "<br>"; document. getElementById ("send "). onclick = function (e) {ws. send (input. value + "said:" + value1.value); value1.value = "";} document. onkeydown = function (e) {e = e | window. event; if (e. keyCode = 13) {document. getElementById ("send "). onclick (); return false ;}} ws. onclose = function (e) {console. log ("server closed");} ws. onerror = function () {console. log ("connection error");}/*** client actively disconnects ***/close. onclick = function () {ws. onclose (); ws. send (input. value + 'close' + "connected"); input. removeAttribute ("readOnly"); conn. disabled = false; close. disabled = true ;}
}
} </Script> </body>
</Html> You can only ignore the ugly interface. Server. js: var ws = require ("nodejs-websocket"); console. log ("start to establish a connection... "); var str1 = null, str2 = null, clientReady = false, serverReady = false; var a = []; var server = ws. createServer (function (conn) {conn. on ('text', function (str) {. push (str); if (! ClientReady) {if (a [0] === str) {str1 = conn; clientReady = true; str1.sendText ("welcome" + str );
} Else if (! ServerReady) {if (str. indexOf ('close')> = 0) {. splice (2, 1); clientReady = false; str1 = null; return;} if (a [1] = str) {str2 = conn; serverReady = true; str2.sendText ("welcome" + str); str1.sendText (str + "online, you can chat"); return ;}} else if (clientReady & serverReady) {str2.sendText (str); str1.sendText (str); if (str. indexOf ('close')> = 0) {. splice (2,. length); var len =. length; for (var I = 0; I <len; I ++) {// locate the element position if (str. indexOf (a [I])> = 0) {. splice (I, 1); if (I = 0) {str1 = str2;} serverReady = false; str2 = null; return ;}
}}}
})
Conn. on ("close", function (code, reason) {console. log ("close connection"); clientReady = false; serverReady = false;}) conn. on ("error", function (code, reason) {console. log (" ");});}). listen (8082); console. log ("websocket Connection completed ")
A brief description:
Start the service and run the same page twice to chat. The process is like this. There is another big problem. For example, if a is disconnected, only B is connected to giant B and can send messages. You can send messages. B actually receives his own information. That cannot be tolerated.
That's all. The logic is disordered. It is a matter of charge to clarify the logic. Do you know anyone? How can this problem be solved?
