Mit nur Javascript chatten?

Question

Ich habe versucht, einen Chat für eine lange Zeit zu machen, aber ich hatte keinen Erfolg darin, es zu machen.

Ich habe viele Möglichkeiten ausprobiert, aber es die msg in meine Datenbank einfügen und dann mit Javascript aktualisieren Sie den Chat jede Sekunde, und erhalten Sie die msg aus der Datenbank, aber das dosent Arbeit so gut.

Ich fragte mich, ist theire eine Möglichkeit, einen Chat nur mit Javascript zu machen? So hängt es an ein Div alle Benutzer sehen können.

Ich sah einige Websites tun, aber ich konnte es nicht selbst tun.

Answer 1

Ja - Sie können einen Chat-Client erstellen, der WebSockets nutzt.

Die einzige Sache, die erforderlich ist, ist, dass Sie einen Server ausführen, um Anforderungen an andere Clients weiterzuleiten, wenn sie ankommen.

Der Server kann in einer Vielzahl von verschiedenen Sprachen geschrieben werden - einige der beliebtesten sind C/C++ (Qt), node.js, Python und gehen.

Es gibt mehr Sprachen, die auch dies als Möglichkeit bieten können ---

Das kam aus http://www.tutorials.kode-blog.com/websocket-chat-client

var output; 
 

 
var websocket; 
 

 
function WebSocketSupport() { 
 
    if (browserSupportsWebSockets() === false) { 
 
    document.getElementById("ws_support").innerHTML = "<h2>Sorry! Your web browser does not supports web sockets</h2>"; 
 

 
    var element = document.getElementById("wrapper"); 
 
    element.parentNode.removeChild(element); 
 

 
    return; 
 
    } 
 

 
    output = document.getElementById("chatbox"); 
 

 
    websocket = new WebSocket('ws:localhost:999'); 
 

 
    websocket.onopen = function(e) { 
 
    writeToScreen("You have have successfully connected to the server"); 
 
    }; 
 

 

 
    websocket.onmessage = function(e) { 
 
    onMessage(e) 
 
    }; 
 

 
    websocket.onerror = function(e) { 
 
    onError(e) 
 
    }; 
 
} 
 

 
function onMessage(e) { 
 
    writeToScreen('<span style="color: blue;"> ' + e.data + '</span>'); 
 
} 
 

 
function onError(e) { 
 
    writeToScreen('<span style="color: red;">ERROR:</span> ' + e.data); 
 
} 
 

 
function doSend(message) { 
 
    var validationMsg = userInputSupplied(); 
 
    if (validationMsg !== '') { 
 
    alert(validationMsg); 
 
    return; 
 
    } 
 
    var chatname = document.getElementById('chatname').value; 
 

 
    document.getElementById('msg').value = ""; 
 

 
    document.getElementById('msg').focus(); 
 

 
    var msg = '@<b>' + chatname + '</b>: ' + message; 
 

 
    websocket.send(msg); 
 

 
    writeToScreen(msg); 
 
} 
 

 
function writeToScreen(message) { 
 
    var pre = document.createElement("p"); 
 
    pre.style.wordWrap = "break-word"; 
 
    pre.innerHTML = message; 
 
    output.appendChild(pre); 
 
} 
 

 
function userInputSupplied() { 
 
    var chatname = document.getElementById('chatname').value; 
 
    var msg = document.getElementById('msg').value; 
 
    if (chatname === '') { 
 
    return 'Please enter your username'; 
 
    } else if (msg === '') { 
 
    return 'Please the message to send'; 
 
    } else { 
 
    return ''; 
 
    } 
 
} 
 

 
function browserSupportsWebSockets() { 
 
    if ("WebSocket" in window) { 
 
    return true; 
 
    } else { 
 
    return false; 
 
    } 
 
}

body { 
 
    font: 12px arial; 
 
    color: #222; 
 
    text-align: center; 
 
    padding: 35px; 
 
} 
 
#controls, 
 
p, 
 
span { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
input { 
 
    font: 12px arial; 
 
} 
 
a { 
 
    color: #0000FF; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
} 
 
#wrapper, 
 
#loginform { 
 
    margin: 0 auto; 
 
    padding-bottom: 25px; 
 
    background: #66CCFF; 
 
    width: 504px; 
 
    border: 1px solid #ACD8F0; 
 
} 
 
#chatbox { 
 
    text-align: left; 
 
    margin: 0 auto; 
 
    margin-bottom: 25px; 
 
    padding: 10px; 
 
    background: #fff; 
 
    height: 270px; 
 
    width: 430px; 
 
    border: 1px solid #ACD8F0; 
 
    overflow: auto; 
 
} 
 
#chatname { 
 
    width: 395px; 
 
    border: 1px solid #ACD8F0; 
 
    margin-left: 25px; 
 
    float: left; 
 
} 
 
#msg { 
 
    width: 395px; 
 
    border: 1px solid #ACD8F0; 
 
} 
 
#submit { 
 
    width: 60px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>WebSocket PHP Open Group Chat App</title> 
 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
 
    <script src="websocket_client.js"></script> 
 
</head> 
 

 
<body onload="javascript:WebSocketSupport()"> 
 
    <div id="ws_support"></div> 
 

 
    <div id="wrapper"> 
 
    <div id="menu"> 
 
     <h3 class="welcome">Welcome to WebSocket PHP Open Group Chat App v1</h3> 
 
    </div> 
 

 
    <div id="chatbox"></div> 
 

 
    <div id="controls"> 
 
     <label for="name"><b>Name</b> 
 
     </label> 
 
     <input name="chatname" type="text" id="chatname" size="67" placeholder="Type your name here" /> 
 
     <input name="msg" type="text" id="msg" size="63" placeholder="Type your message here" /> 
 
     <input name="sendmsg" type="submit" id="sendmsg" value="Send" onclick="doSend(document.getElementById('msg').value)" /> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>