websocket搭建的聊天室

在前后端数据交互的时候我们经常使用的是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);                        //给每一个链接发送数据
    });
}

有说的不对的欢迎大家吐槽,大家相互学习。

posted @ 2018-01-19 09:58  阿弥陀佛么么哒!  阅读(213)  评论(0编辑  收藏  举报