文档章节

NodeJs 搭建简单的聊天室

skq
 skq
发布于 2016/05/27 14:04
字数 610
阅读 89
收藏 4
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>

 

© 著作权归作者所有

下一篇: git 问题
skq

skq

粉丝 10
博文 75
码字总数 13118
作品 0
武汉
私信 提问
nodejs入门——搭建一个聊天室应用

个人博客 http://mvc.coding.io/ 1入门教程推荐 node入门 很早之前看的就是这个,比较浅显易懂,看一遍就明白nodejs到底是怎么一回事儿了 2开源项目 昨天在coding上看到了一个nodejs聊天室,...

蛙牛
2014/08/06
4.2K
6
NODE.JS & HTML5 聊天室

最近学习了一下 HTML5 + node.js,一边学习一边做例子。 用 node.js 制作 Server 端,提供 http & webSocket 服务,其中 webSocket 使用的是 socket.io 前台采用的是 静态的html 页面,用 ht...

zTree
2012/08/14
2.9K
2
从0开始用Nodejs做一个聊天室

Cover 效果图 老样子,还是先放个效果图,动态图,有点大(4M)请耐心等加载。 随便说说 最近在做东西的时候有一个对战功能,需要用到Socket技术,于是了解了一番相关的实现方案,最后选择了...

iimT
2018/05/13
0
0
【求助】谁知道 node-websocket-server 框架怎么用,麻烦帮忙看一下

本人是名在校大三学生,刚接触nodejs不到一个星期,看了node入门 然后主要是想用nodejs结合websocket和WebGL搞一个小开发,正好在本站和其他地方都有许多讲nodejs与websocket结合的文章,其中在w...

冯焰
2012/02/04
1K
2
WebRTC基础实践 - 7. 配置信令服务

本节内容 在本节课程中, 我们将学习以下内容: 通过 安装 文件中指定的项目依赖 运行Node.js服务器, 通过 node-static 提供静态文件服务。 用Socket.IO创建消息传递服务 创建聊天室以及发送聊...

铁锚
2018/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 自定义登录认证(二)

一、前言 本篇文章将讲述Spring Security自定义登录认证校验用户名、密码,自定义密码加密方式,以及在前后端分离的情况下认证失败或成功处理返回json格式数据 温馨小提示:Spring Security...

郑清
18分钟前
1
0
php yield关键字以及协程的实现

php的yield是在php5.5版本就出来了,而在初级php界却很少有人提起,我就说说个人对php yield的理解 Iterator接口 在php中,除了数组,对象可以被foreach遍历之外,还有另外一种特殊对象,也就是继承...

冻结not
31分钟前
2
0
servlet请求和响应的过程

本文转载于:专业的前端网站➥servlet请求和响应的过程 1.加载 Servlet类被加载到Java虚拟机中,并且实例化。在这个过程中,web容器(例如tomcat)会调用Servlet类的公开无参构造函数,产生一...

前端老手
31分钟前
2
0
golang 1.13 errors 包来了,不用写“err 气功波”代码

引 这篇是对 errors 包 的姿势挖掘 气功波错误代码 从 http.Get()返回的错误 判断 syscall.ECONNREFUSED 错误.以前要对 go 标准库 error 结构有点熟悉,才能写出下面的代码 func CmdErr(err ...

guonaihong
35分钟前
25
0
喜玛拉雅已听书单

时间倒序排 书名 作者 状态 唐砖 孑与2 进行中 死灵之书(克苏鲁神话合集) 阿卜杜拉·阿尔哈萨德 进行中 赡养人类 刘慈欣 完结 赡养上帝 刘慈欣 完结 中国太阳 刘慈欣 完结 中国太阳 刘慈欣...

Alex_Java
36分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部