该聊天工具，使用nodejs起服务，websocket前端页面，聊天工具，，可以有任意多的人数参与聊天，里面的用户ID为模拟ID。

先上图

文件夹结构，

1、安装ws模块，npm install ws

2、web.js文件，是Nodejs后端代码

var WebSocketServer = require('ws').Server,

wss = new WebSocketServer({ port: 8181 });

//var client1 = null,client2=null,client1Ready = false, client2Ready = false;

var config = {};

var userList = {};

wss.on('connection', function (ws) {

    console.log('client connected');

    ws.on('message', function (message) {

      var data = JSON.parse(message);

      console.log(data);

      if(data.type == 'register'){

      	console.log("register");

      	config[data.meID]  =  {

			ID:data.meID,

			myNike:data.sendNike,

			pipe:ws,

			Ready:true

		};

      	userList[data.meID] = {

			ID: data.meID,

			myNike: data.sendNike

		};

      	refreshList();

      }else if(data.type == 'sendMessage'){

      	console.log("send");

      	sendMessage(data);

      }else{

      	ws.send(JSON.stringify({"error":true}));

      }

    });

    ws.on("close",function(code, reason){

    	for(var i in config){

    		if(config[i].pipe === ws){

    			config[i].Ready = false;

    			config[i].pipe = null;

    			delete config[i];

    			delete userList[i];

    			refreshList();

    			break;

    		}

    	}

    	console.log("关闭链接");

    });

});

//更新聊天列表

function refreshList(){

	for(var i in config){

		config[i].pipe.send(JSON.stringify({

			'type':'refreshList',

			'list':userList

		}));

	}

}

//更新聊天

function sendMessage(data){

	if(config[data.receiveID]){

		//对方在线

		data.sendNike = userList[data.meID].myNike;

		config[data.meID].pipe.send(JSON.stringify(data));

		config[data.receiveID].pipe.send(JSON.stringify(data));

	}else{

		//对方不在线

		config[data.meID].pipe.send(JSON.stringify({"error":true}));

	}

}

//npm install ws

　　

2、添加客户端client.html

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>client1</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

			font-family: "微软雅黑";

		}

		#chat{

			width: 600px;

			height: 400px;

			margin: 50px auto;

			border: 4px solid yellowgreen;

		}

		p{

			font-size: 16px;

			color: #9ACD32;

			padding: 0 20px;

		}

		#chat p.send{

			text-align: right;

			color: deeppink;

		}

		#chat p.receive{

			text-align:left ;

		}

		.btn{

			text-align: center;

		}

		.showState{

			text-align: center;

		}

		.showInfo{

			text-align: center;

		}

		div.firend{

			width: 200px;

		}

		div.firend p{

			height: 30px;

			text-align: center;

			line-height: 30px;

			background: deeppink;

			color: #fff;

		}

		ul.list{

			width: 200px;

		}

		ul.list li{

			height: 30px;

			line-height: 30px;

			background: #9ACD32;

			color: #fff;

			text-align: center;

			border: 1px solid #000;

			cursor: pointer;

			position: relative;

		}

		ul.list li span{

			position: absolute;

			width: 20px;

			height: 20px;

			text-align: center;

			line-height: 20px;

			font-size: 14px;

			border-radius: 10px;

			background: red;

			color: #fff;

			right: -10px;

			top: 5px;

			display: none;

		}

	</style>

</head>

<body>

<div class="showState">正在链接..</div>

<div class="showInfo"></div>

<div id="chat">

</div>

<div class="btn">

	<input type="text" name="message" id="message" value="" />

	<button onclick="sendMessage()">发送</button>

</div>

<div class="firend">

	<p>在线好友列表</p>

	<ul class="list">

	</ul>

</div>

</body>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

	var sendConfig = {

		"type":"send",

		"meID":getName(),

		"sendNike":"client1",

		"receiveNike":"",

		"receiveID":''

	};

	var register = {

		"type":"register",

		"sendNike":sendConfig.sendNike,

		"meID":sendConfig.meID

	}

	var messageList = {};

	//随机获取名称

	function getName() {

		var timer = new Date();

		var arr = JSON.stringify(timer).replace(/:|-|"/g, '').split('.');

		var str = arr.join('');

		console.log(str);

		return str;

	}

	var mes = document.getElementById("message");

	var box = $("#chat");

	var chatWith = $(".showInfo");

	var showState = $(".showState");

	var personList = $(".list");

	var ws = new WebSocket("ws://localhost:8181");

	ws.onopen = function (e) {

		ws.send(JSON.stringify(register));

		showState.html("链接成功!");

		// chatWith.html("你正在和:"+ sendConfig.receiveNike + "聊天");

	}

	//接收聊天信息

	ws.onmessage=function (e) {

		var data = JSON.parse(e.data);

		if(data.type == 'refreshList'){

			refreshList(data.list);

		}else if(data.type == 'sendMessage'){

			messageStore(JSON.parse(e.data));

		}

	};

	//记录消息通信

	function  messageStore(data) {

		var recodeId1 = data.receiveID + "&" + data.meID;

		var recodeId2 = data.meID  + "&" + data.receiveID;

		if(messageList[recodeId1]){

			messageList[recodeId1].push(data);

		}else if(messageList[recodeId2]){

			messageList[recodeId2].push(data);

		}else{

			messageList[recodeId1] = [];

			messageList[recodeId1].push(data);

		}

		//create(data);

		alertmessage(data);

	}

	//提示消息来了

	function alertmessage(data) {

		var liList = $('ul.list').find('li');

		for(var i = 0; i < liList.length ; i++ ){

			if(liList.eq(i).attr('userId') == data.meID){ //找到对应的消息接收者

				if(data.meID != sendConfig.meID){   //排除自己

					if(data.meID != sendConfig.receiveID){  //排除正在聊天的人

						var $span = 	liList.eq(i).find('span');

						$span.css('display','block');

						$span.html($span.html()*1+1);

					}else{

						create(data);

					}

				}else{

					create(data);

				}

				break;

			}

		}

	}

	//更新好友列表

	function refreshList(data){

		console.log(data);

		personList.html('');

		for(var  i in data){

			if(data[i].ID == sendConfig.meID){

				personList.append('<li userId =' + data[i].ID  + ' > <strong>自己 </strong> <span>0</span> </li>')

			}else{

				personList.append('<li userId =' + data[i].ID  + ' ><strong>'+ data[i].myNike  +'</strong><span>0</span></li>')

			}

		}

	}

	//选择聊天对象

	$(".list").on("click","li",function(){

		box.html('');

		chatWith.html("你正在和:"+ $(this).find('strong').html() + "聊天");

		sendConfig.receiveID = $(this).attr('userId');

		//取出聊天记录

		var recodeId1 = sendConfig.receiveID + "&" + sendConfig.meID;

		var recodeId2 = sendConfig.meID  + "&" + sendConfig.receiveID;

		if(messageList[recodeId1]){

			getMessageRecod( messageList[recodeId1]);

		}else if(messageList[recodeId2]){

			getMessageRecod( messageList[recodeId2]);

		}

		//隐藏消息提示

		$(this).find('span').css('display','none').html('0');

	});

	//取出聊天记录,并且渲染

	function  getMessageRecod(data) {

		if(data){

			for(var i = 0; i < data.length ; i++){

				create(data[i]);

			}

		}

	}

	//创建标签

	function create(data){

		if(data.error){

			alert("发送失败,对方不在线!");

		}else {

			if (data.meID == sendConfig.meID) {

				box.append("<p class='send'>" + sendConfig.sendNike + ":" + data.message + "</p>");

			} else {

				box.append("<p class='receive'>" + data.sendNike + ":" + data.message + "</p>");

			}

		}

	}

	//发送聊天信息

	function sendMessage() {

		if(sendConfig.receiveID == ''){

			alert('没有选择发送消息对象!');

		}else{

			var mesage = {

				"type":"sendMessage",

				"meID":sendConfig.meID,

				"receiveID":sendConfig.receiveID,

				"message":mes.value,

			};

			var str = JSON.stringify(mesage);

			ws.send(str);

		}

	}

</script>

</html>

　　3、添加客户端，client2.html，client3.html，，，只需要修改client1.html中，config的sendNick如图，

4、注意添加jquery文件

5、nodejs启动web.js文件，打开所有.html文件，进行聊天。

nodejs+websocket聊天工具的更多相关文章

  1. nodejs加WebSocket,聊天工具

    1.WebSocket必须要与服务器连接,所以这里采用node起服务,这里用到了ws,,也有人用nodejs-websocket 2.首先 npm install ws 3.新建一个server.js ...

  2. nodejs websocket 聊天应用

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...

  3. 基于Nodejs开发的web即时聊天工具

    由于公司需要开发web即时聊天的功能,开始时我们主要的实施方法是用jquery的ajax定时(10秒)轮询向服务器请求,由于是轮询请求,对 服务器的压力比较大.我们网站上线的时间不长,访问量不是很大, ...

  4. 使用.NET Core和Vue搭建WebSocket聊天室

    博客地址是:https://qinyuanpei.github.io.  WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...

  5. h5聊天工具的开发过程及思路

    这个产品的主要技术栈有,网易nim即时通信,vue-cli,muse-ui 1.在拿到这个需求时,脑袋里空的,什么想法都没有,完全懵逼,进了网易云通信的官网api查看,由于我做的是客户端的,所以重点看 ...

  6. 使用PHP+Swoole实现的网页即时聊天工具：PHPWebIM

    使用PHP+Swoole实现的网页即时聊天工具 全异步非阻塞Server,可以同时支持数百万TCP连接在线 同时支持websocket+comet2种兼容协议,可用于所有种类的浏览器包括IE 拥有完整 ...

  7. Netty 实现 WebSocket 聊天功能

    上一次我们用Netty快速实现了一个 Java 聊天程序(见http://www.waylau.com/netty-chat/).现在,我们要做下修改,加入 WebSocket 的支持,使它可以在浏览 ...

  8. Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试

    Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...

  9. RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.8 版本━新增企业通（内部简易聊天工具）

    RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.8 版本 新增企业通(内部简易聊天工具) RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用 ...

随机推荐

  1. redis（二）--用Redis作MySQL数据库缓存

    用Redis作MySQL数据库缓存,必须解决2个问题.首先,应该确定用何种数据结构存储来自mysql的数据:在确定数据结构之后,还要考虑用什么标识作为该数据结构的键. 直观上看,Mysql中的数据都是 ...

  2. asp.net利用存储过程分页代码

    -最通用的分页存储过程 -- 获取指定页的数据 CREATE PROCEDURE Pagination ), -- 表名 ) = '*', -- 需要返回的列 )='', -- 排序的字段名 , -- ...

  3. SecureCRT安装使用

    ● 解决自动断开 echo "TMOUT=6000 " >>/etc/profile source /etc/profile 在连接上右键属性,然后“终端”,“反空闲” ...

  4. 洛谷P1101 单词方阵【暴力】【字符串】

    题目描述 给一n×nn \times nn×n的字母方阵,内可能蕴含多个“yizhong”单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 888 个方向的任一方向,同一单词摆放时不再改变方向, ...

  5. iOS循环引用常见场景和解决办法

    好多场景会导致循环引用,例如使用Block.线程.委托.通知.观察者都可能会导致循环引用. 1.委托 遵守一个规则,委托方持有代理方的强引用,代理方持有委托方的弱引用. 实际场景中,委托方会是一个控制 ...

  6. PHP 正则表达式---匹配模式

    1.PHP 正则表达式 正则表达式贪婪匹配,非贪婪匹配. 默认是贪婪匹配, 例如 ①.贪婪匹配, $str = ' 香肠 月饼 '; preg_match('/ (.)</td>/',$s ...

  7. iOS中类、元类、isa详解

    类相信大家都知道是什么,如果看过runtime的源码或者看过相关的文章对isa肯定也不陌生,不过元类(meta class)大家可能就比较陌生了.不过大家也不要担心,我会细细道来,让大家明白它到底是个 ...

  8. xcode工程编译错误:error: Couldn’t materialize

    错误信息: error: Couldn't materialize: couldn't get the value of variable amount: variable not available ...

  9. 【PyQt5-Qt Designer】QMessageBox 弹出框总结

    QMessageBox QMessageBox类中常用方法 方法  描述 information(QWdiget parent,title,text,buttons,defaultButton) 弹出 ...

  10. fio 测试 磁盘I/O: ls -1 /sys/block/sda/queue/ | awk '{cmd="cat "i$0; print i$0; system(cmd) }' i=`pwd`'/'

    小型计算机系统接口(SCSI,Small Computer System Interface) SAS(Serial Attached SCSI,串列SCSI) SCSI 硬盘名称: sd[a-p] ...