nodejs+websocket聊天工具
该聊天工具，使用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聊天工具的更多相关文章
- nodejs加WebSocket,聊天工具
1.WebSocket必须要与服务器连接,所以这里采用node起服务,这里用到了ws,,也有人用nodejs-websocket 2.首先 npm install ws 3.新建一个server.js ...
- nodejs websocket 聊天应用
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
- 基于Nodejs开发的web即时聊天工具
由于公司需要开发web即时聊天的功能,开始时我们主要的实施方法是用jquery的ajax定时(10秒)轮询向服务器请求,由于是轮询请求,对 服务器的压力比较大.我们网站上线的时间不长,访问量不是很大, ...
- 使用.NET Core和Vue搭建WebSocket聊天室
博客地址是:https://qinyuanpei.github.io. WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...
- h5聊天工具的开发过程及思路
这个产品的主要技术栈有,网易nim即时通信,vue-cli,muse-ui 1.在拿到这个需求时,脑袋里空的,什么想法都没有,完全懵逼,进了网易云通信的官网api查看,由于我做的是客户端的,所以重点看 ...
- 使用PHP+Swoole实现的网页即时聊天工具：PHPWebIM
使用PHP+Swoole实现的网页即时聊天工具 全异步非阻塞Server,可以同时支持数百万TCP连接在线 同时支持websocket+comet2种兼容协议,可用于所有种类的浏览器包括IE 拥有完整 ...
- Netty 实现 WebSocket 聊天功能
上一次我们用Netty快速实现了一个 Java 聊天程序(见http://www.waylau.com/netty-chat/).现在,我们要做下修改,加入 WebSocket 的支持,使它可以在浏览 ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.8 版本━新增企业通（内部简易聊天工具）
RDIFramework.NET ━ .NET快速信息化系统开发框架 V2.8 版本 新增企业通(内部简易聊天工具) RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用 ...
随机推荐
- JVM内存GC的骗局——JVM不抛出OOM但内存已经泄露
概述 在日常测试中,我们会去重点观察java的内存使用情况,比如:进程会抛出OOM异常,不再接收新的请求:响应时间在固定时间段内变长,超时或者不响应,CPU使用率时常像过山车一样等.有时候JVM还会发 ...
- J S 脚本语言 if() { if { } else { } } var a =100; switch { case ( ) break ; } 基础详解 ， 最下面有例子
注释语法 注释语法// 多行注释/ JS输出语句 JS样式尽量靠最下面写 <script type="text/javascript">//嵌入JS开始代码 //ale ...
- iBatis System.ArgumentNullException : 值不能为 null。 参数名: path2
System.ArgumentNullException : 值不能为 null. 参数名: path2 在app.config 或 web.config 中加上配置就可以了 <appSetti ...
- MySQL之单表查询 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录数:LIMIT 九 使用正则表达式查询
MySQL之单表查询 阅读目录 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER B ...
- CCPC-Wannafly Winter Camp Day4 Div1 - 最小边覆盖 - [线段树]
题目链接:https://zhixincode.com/contest/18/problem/C?problem_id=261 样例输入 1 4 21 23 4 样例输出 1 Yes 样例输入 2 4 ...
- POJ 3635 - Full Tank? - [最短路变形][优先队列优化Dijkstra]
题目链接:http://poj.org/problem?id=3635 Description After going through the receipts from your car trip ...
- idea 乱码问题
1. db browser查询结果为乱码: 找到idea的安装目录 如C:\..\Roaming\JetBrains\IntelliJ IDEA Community Edition 2018.1.3\ ...
- PHP之类型转化
类型转化的判别 PHP在变量定义中不需要(或者不支持)明确的类型定义:变量类型是根据使用该变量的上下文所决定的, 也就是说,如果把一个string值付给变量$var,$var就成了一个string,如 ...
- EF-CodeFirst-数据迁移
数据迁移 之前说到Code-First中有不同的数据库初始化策略,如CreateDatabaseIfNotExists,DropCreateDatabaseIfModelChanges和DropCre ...
- TFA（Trace File Analyzer）的安装与使用（ORACLE版本12C）
TFA是Oracle从11.2版本开始推出的一种类似diagcollection的一个oracle 集群日志收集器,而且TFA比diagcollection集中和自动化的诊断信息收集能力更强大.TFA ...