该聊天工具，使用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. centos7 LANMP 安装

    没有开头语. 操作系统:CentOs7.6 64位. Nginx:系统自带 nginx1.12.2包. Mysql:系统自带 MariaDB 5.6 ,更换为 Mysql5.6 PHP:系统php5. ...

  2. db2 reorg(转）

    DB2 reorg RUNSTATS: db2 connect to rmdb11 user rmadmin using rmadmin 对所有用户表执行runstats(reorgchk加updat ...

  3. mapReducer第一个例子WordCount

    mapreducer第一个例子,主要是统计一个目录下各个文件中各个单词出现的次数. mapper package com.mapreduce.wordCount; import java.io.IOE ...

  4. nowcoder 206A - Birthday - [最小费用最大流]

    题目链接:https://www.nowcoder.com/acm/contest/206/A 题目描述 恬恬的生日临近了.宇扬给她准备了一个蛋糕.正如往常一样,宇扬在蛋糕上插了n支蜡烛,并把蛋糕分为 ...

  5. [No0000DA]WPF ControlTemplate简介

    一.简介 WPF包含数据模板和控件模板,其中控件模板又包括ControlTemplate和ItemsPanelTemplate,这里讨论一下ControlTemplate.其实WPF的每一个控件都有一 ...

  6. Django：模型model和数据库mysql（一）

    以一个栗子尝试来记录: 两个表存储在数据库中,BookInfo表示书,HeroInfo表示人物.一本书中有多个人物 在MySQL中新建一个数据库Django1,不用创建表,用Django模型来配置数据 ...

  7. Page14：状态观测器[Linear System Theory]

    内容包含状态观测器设计分类及其特点 状态观测器设计与状态反馈之间的关系问题 带补偿器动态输出反馈与带状态观测器的状态反馈等价原理 由于第二部分频域部分较为简单,因此仅整理时间域部分

  8. [daily] pandoc

    学了LaTeX之后,你就会很自然的接触的另一种观点: LaTeX是专注于排版的,你需要专注于内容. 于是,请使用pandoc. 简单的说, pandoc就是可以将各种个样格式的文档转换成各种各样格式的 ...

  9. [development][dpdk] dpdk与CONFIG_RTE_MAX_MEMSEG有关的错误

    dpdk程序无法启动, 错误如下: EAL: Requesting pages of size 2MB EAL: Requesting pages of size 2MB EAL: Can only ...

  10. Java代码中获取Json的key值

    测试json字符串: {"access_token":"hkbQl5o_l67dZ7_vJRATKBwTLk9Yj5QyMuOJThAr8Baj0xWf4wxW1p4ym ...