该聊天工具，使用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. Ajax框架---dwr的用法

    通常使用Ajax时用的都是jQuery框架,现在公司的框架里用的都是dwr.我觉得dwr和jQuery中的ajax用法差不多,看起来也很像. 一.简介 百度百科上对dwr的描述: DWR采取了一个类似 ...

  2. 线段树||BZOJ1593: [Usaco2008 Feb]Hotel 旅馆||Luogu P2894 [USACO08FEB]酒店Hotel

    题面:P2894 [USACO08FEB]酒店Hotel 题解:和基础的线段树操作差别不是很大,就是在传统的线段树基础上多维护一段区间最长的合法前驱(h_),最长合法后驱(t_),一段中最长的合法区间 ...

  3. Codeforces 670E - Correct Bracket Sequence Editor - [链表]

    题目链接:https://codeforces.com/contest/670/problem/E 题意: 给出一个已经匹配的括号串,给出起始的光标位置(光标总是指向某个括号). 有如下操作: 1.往 ...

  4. [No0000D7]img生成器.bat合并所有图片到html网页中

    @ECHO OFF IF EXIST %~nx0.html DEL /F /Q %~nx0.html ECHO ^<html^>^<head^>^<title^>% ...

  5. 一个生产可用的mysql参数文件my.cnf

    [client]#客户端选项设置#设置客户端和连接字符集default_character_set = utf8port = 3306socket = /opt/mysql-5.6.24/tmp/my ...

  6. piano class 12

    1,不要记谱子,眼睛要一直看着谱子,手指凭感觉找琴键 2,弹的时候一定要按照谱子上标出来的指法弹奏,很重要 3,两只手要会跷跷板弹奏 4,八分音符,一般第二个会比第一个弱一点,但是要看自己感觉 5,慢 ...

  7. LU decomposition can be viewed as the matrix form of Gaussian elimination.

    https://en.wikipedia.org/wiki/LU_decomposition One way to find the LU decomposition of this simple m ...

  8. day 0308 编码的进阶 文件操作

    一.编码的进阶: 在python3以后,字符串和bytes类型彻底分开,字符串以字符为单位进行处理的,bytes类型是以字节为单位处理的. bytes数据类型在所有的操作和使用与字符串方法基本一样,也 ...

  9. iOS-静态库，动态库，framework，bundle浅析(四)

    1. 创建bundle,如图,点击 +  ,弹出选择框, macOS 下的Framework & Library  ,点击bundle,输入bundle的名字,然后点击 finish.   图 ...

  10. [qemu][kvm] 在一个vmware虚拟机里安装qemu-kvm虚拟机

    说起来这个需求,简直是傻傻的.但却实实在在的摆在我的面前.... VM无外乎就是为了模拟场景:我现在要的场景就是一台很多个core的linux主机.但是我只有一个装了windows的笔记本.上边有一个 ...