当前位置：首页 > news >正文

NodeJs 搭建简单的聊天室

news 来源：原创 2024/5/17 18:56:55

为什么80%的码农都做不了架构师？>>>

var WebSocketServer = require('ws').Server
  , wss = new WebSocketServer({port: 8081, maxPayload: 0});

var wsClient = [];

wss.on('connection', function(ws){
    ws.on('message', function(data, flags){
        var json = {};
        try{
            json = JSON.parse(data);
            console.log(json);
        }catch(err){

        }
        if( !json.type ) return;
        switch(json.type){
        	case 1:
        		// 注册
        		act.reg(ws, json);
        	break;
        	case 2:
        		// 发送消息
        		act.send(json);
        	break;
        }
        
    });

    ws.on('close',function(){
        act.remove(ws.uid);
    });
});

var act = {
	reg: function(ws, json){
		if( json.uid ){
			act.remove(json.uid);
			ws.uid = json.uid;
			wsClient.push(ws);
			ws.send(JSON.stringify({type: 1, error: 0}));
		}
	},

	send: function(json){
		if( json.toUid ){
			var ws = act.getWs(json.toUid);
			if( ws ){
				ws.send(JSON.stringify(json));
			}
        }
	},

	// 移除指定的客户端
	remove: function(uid){
		for(var i=0; i < wsClient.length; i++){
            if( wsClient[i].uid == uid ){
            	wsClient.splice(i,1);
            } 
        }
	},

	// 获取指定的客户端 
	getWs: function(uid){
		for(var i = 0; i < wsClient.length; i++){
        	if( wsClient[i].uid == uid ){
        		return wsClient[i];
        	}
    	}

    	return null;
	}
};

客户端 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta content="width=device-width, initial-scale=1.0, user-scalable=0" name="viewport">
    <title>多人聊天室</title>
    <!--[if lt IE 8]><script src="./json3.min.js"></script><![endif]-->
    <!--script src="http://realtime.plhwin.com:3000/socket.io/socket.io.js"></script-->
</head>

<body>
    <div id="loginbox">
        <div style="width:260px;margin:200px auto;">
            请先输入你在聊天室的昵称
            <br/>
            <br/>
            <input type="text" style="width:180px;" placeholder="请输入用户名" id="username" name="username" />
            <input type="button" style="width:50px;" value="提交" onclick="CHAT.usernameSubmit();" />
        </div>
    </div>
    <div id="chatbox" style="display:none;">
        <div style="background:#3d3d3d;height: 28px; width: 100%;font-size:12px;">
            <div style="line-height: 28px;color:#fff;">
                <span style="text-align:left;margin-left:10px;">Websocket多人聊天室</span>
                <span style="float:right; margin-right:10px;"><span id="showusername"></span>|
                <a href="javascript:;" onclick="CHAT.logout()" style="color:#fff;">退出</a>
                </span>
            </div>
        </div>
        <div id="doc">
            <div id="chat">
                <div id="message" class="message">
                    <div id="onlinecount" style="width:background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;">
                    </div>
                </div>
                <div class="input-box">
                    <div class="input">
                    <input type="text" maxlength="140" placeholder="发送给谁" id="uid" name="content" />
                        <input type="text" maxlength="140" placeholder="请输入聊天内容，按Ctrl提交" id="content" name="content" />
                    </div>
                    <div class="action">
                        <button type="button" id="mjr_send" onclick="CHAT.submit();">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--script type="text/javascript" src="./client.js"></script-->
    <script type="text/javascript">
    // 创建一个Socket实例
    var socketArr = [];
    var CHAT = {};

    var cid = 1;
    
    var socket;
    var wss = function(uid){
		socket = new WebSocket('ws://192.168.2.222:8081');
		
		// 打开Socket 
		socket.onopen = function(event) {

			// 发送一个初始化消息
			var data = {
				uid: uid,
				username: 'aaa',
                type: 1
			};

			socket.send(JSON.stringify(data));

			// 监听消息
			socket.onmessage = function(event) {
				//console.log('onMessage>', event);
                var $msg = document.getElementById("message");
                var con  = $msg.innerHTML;
                $msg.innerHTML = con + '<p>'+ event.data +'</p>';

                var json = {};
                try{
                    json = JSON.parse(event.data);
                    console.log(json);
                }catch(err){

                }

                if( json.type == 1 && json.error == 0 ){
                    console.log('reg ok...');
                }
			};

			// 监听Socket的关闭
			socket.onclose = function(event) {
				console.log('Client notified socket has closed', event);
			};

			// 关闭Socket.... 
			//socket.close() 
		};
		
		//socketArr.push(socket);
	}
	
	//console.debug(socketArr.length);



    CHAT.usernameSubmit = function(){
        var name = document.getElementById("username").value;
        CHAT.name = name;
        document.getElementById("showusername").html = CHAT.name;
        document.getElementById("chatbox").style.display = "block";

        wss(name);
    }

    CHAT.submit = function(){
        var uid = document.getElementById("uid").value;
        var msg = document.getElementById("content").value;

        // 发送消息
        var data = {
            uid: CHAT.name,
            toUid: uid,
            type: 2,
            msg: msg
        };

        socket.send(JSON.stringify(data));
    }
    </script>
</body>

</html>

转载于:https://my.oschina.net/skq/blog/682762