WebSocket实现一个聊天室

聊天室页面-->index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>初识WebSocket</title>
</head>
<body>
	<h1>Chat Room</h1>
	<div style="margin-top: 30px;margin-left:30px">
		<input type="text" id="info">	
		<button id="send">send</button>
		<div id="notice"></div>
		<div id="msg"></div>
	</div>
</body>
<script src="websocket.js"></script>
</html>

发送请求与接受响应-->websocket.js

var info = document.getElementById("info");
var send= document.getElementById("send");
var notice = document.getElementById("notice");
var msg = document.getElementById("msg");

var ws 	= new WebSocket("ws://localhost:8001");
ws.onopen = function(){
	notice.innerHTML = "websocket connected";
}
ws.onclose = function(){
	notice.innerHTML = "closed"
}
ws.onmessage = function(response){
	console.log(response);
	//收到message后，创建一个div，保存消息，并追加到msg中。
	var div = document.createElement("div");
	var json = JSON.parse(response.data);
	switch(json.type){
		case "enter":
			div.innerHTML = "<font color='blue'>" + json.data + "</font>";
			break;
		case "message":
			div.innerHTML = "<font color='orange'>" + json.data + "</font>";
			break;
		default:
			div.innerHTML = "<font color='brown'>" + json.data + "</font>";
			break;
	}
	msg.appendChild(div);
}
send.onclick = function(){
	ws.send(info.value)
}

WebSocket服务器-->server.js

var ws = require("nodejs-websocket")

var port = 8001;
var count = 0;//client的计数器

function broadcast(server, msg) {
	//server.connections是一个数组，保存着所有client
    server.connections.forEach(function (connection) {
        connection.sendText(msg);
    });
}
var server = ws.createServer(function (conn) {
    console.log("New connection");
    count++;
    conn.nickname = "user" + count;
    var msg = {
    	"type" : "enter",
    	"data" : conn.nickname + " come in"
    }
    broadcast(server, JSON.stringify(msg));
    conn.on("text", function (str) {
        console.log("Received From: "+ conn.nickname + " ----  Data:" + str);
        var msg = {
	    	"type" : "message",
	    	"data" : conn.nickname + ": " + str
	    }
	    broadcast(server, JSON.stringify(msg));
    });
    conn.on("close", function (code, reason) {
    	var msg = {
	    	"type" : "left",
	    	"data" : conn.nickname + " left the room"
	    }
	    broadcast(server, JSON.stringify(msg));
        console.log("Connection closed");
    });
    conn.on("error", function(err){
    	console.log("some accident happend");
    	console.log(err);
    });
});

console.log("websocket started , listening " + port)
server.listen(port)

WebSocket实现一个聊天室

聊天室页面-->index.html

发送请求与接受响应-->websocket.js

WebSocket服务器-->server.js

猜你喜欢