與唯一的javascript聊天？

我一直在試着做一個聊天，但我沒有成功。與唯一的javascript聊天？

我嘗試過很多方法，但使得它插入味精到我的數據庫，然後用JavaScript刷新聊天每一秒，並從數據庫中獲取的味精，但dosent工作那麼好。

我想知道的是他們只用JavaScript做聊天的方法嗎？所以它附加到所有用戶可以看到的div。

我看到一些網站這樣做，但我一直無法自己做。

來源

2016-12-25 Sam H

會有贈品是涉及到服務器 - 所以「聊天只有javascript「（意思是客戶端js）：不。當然，如果你的服務器運行Node.js，它仍然是js--但是在服務器上。 – Jeff

是的 - 您可以製作一個聊天客戶端，利用Websockets。

唯一需要的是你爲了到達時將請求轉發到其他客戶端運行的服務器。

服務器可以被寫在各種不同的語言 - 一些最流行的是C/C++（QT），Node.js的，Python和走。

還有更多可以提供這作爲能力以及語言---

這來自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>

來源

2016-12-25 00:45:12 mike510a

與唯一的javascript聊天？

回答

相關問題