websocket搭建的聊天室
阿新 • • 發佈：2018-01-19
說明 原理 example port adc type htm 消息 var
在前後端數據交互的時候我們經常使用的是ajax，用的是傳統的http協議，而http協議有個致命的缺點，就是請求一結束，連接就斷開了， 我們為了保持這個鏈接的，通常會使用cookie，而自從h5出現websocket之後，媽媽再也不用擔心我的請求了，可以愉快的玩耍了，websocket是TCP協議，也就是所謂的“長連接”，可以一直保持，客戶端與服務端的連接，交互起來自然是so easy ,to happy,這兩天利用工作之余，寫了一個基於nodejs和websocket的聊天室，只為說明原理，沒有做任何的樣式，不喜勿噴
這是客戶端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="input"/>
<input type="button" value="發送" id="btn"/>
</body>
<script>
var websocket = new WebSocket("ws://localhost:3000/");
function showMessage(type,str){
var div = document.createElement(‘div‘);
div.innerHTML = str;
if(type == ‘enter‘){
div.style.color = ‘blue‘;
}else if(type == ‘leave‘){
div.style.color = ‘red‘;
}
document.body.appendChild(div);
}
websocket.onopen = function(){ //連接成功後的回調
document.getElementById(‘btn‘).onclick = function(){
var txt = document.getElementById(‘input‘).value;
if(txt){
websocket.send(txt);
}
}
}
websocket.onclose = function(){ //關閉連接的回調
}
websocket.onmessage = function(e){ //發送消息的回掉
var msg = JSON.parse(e.data);
showMessage(msg.type,msg.data);
}
</script>
</html>
這是服務端：
var ws = require("nodejs-websocket") //導入nodejs-websocket模塊 var PORT = 3000; var clientCount = 0; // Scream server example: "hi" -> "HI!!!" var server = ws.createServer(function (conn) { //建立連接時 console.log("New connection") clientCount++; conn.nickname = ‘user‘+clientCount; //每一個用戶名 var msg = {}; msg.type = "enter"; //消息的類型， msg.data = conn.nickname + ‘ 進入了聊天室‘; msg = JSON.stringify(msg); //數據格式化 broadcast(msg); //用於廣播數據 console.log(msg); conn.on("text", function (str) { console.log("Received "+str) var msg = {}; msg.type= ‘message‘; msg.data = conn.nickname + ‘：‘ + str; msg = JSON.stringify(msg); broadcast(msg); }) conn.on("close", function (code, reason) { //鏈接關閉的回調，註意這個一定要寫，否則在關閉頁面的時候，服務會拋異常； console.log("Connection closed") var msg = {}; msg.type = ‘leave‘; msg.data = conn.nickname +‘離開了‘; msg = JSON.stringify(msg); broadcast(msg); }) conn.on("error", function (err) { //出錯時候的回調； console.log(err); }) }).listen(PORT); function broadcast(str){ server.connections.forEach(function(connection){ //遍歷所有的鏈接 connection.sendText(str); //給每一個鏈接發送數據 }); }
有說的不對的歡迎大家吐槽，大家相互學習。
websocket搭建的聊天室