基于NodeJs的局域网聊天室
2017-01-21 11:25
344 查看
1.该系统基于nodeJs,electron旨在开发一个桌面端的简单聊天系统(1对1)
2.基于nodeJs的socket编程
思路:
首先需要一个服务器,用来做中转服务,并做一些逻辑判断,从而达到一对一聊天的目的
客户端只需连接服务器,制定一定的数据格式进行发送数据即可
具体的界面则用electron来处理
服务器代码:
客户端:
页面(index.html):[这里用的electron来处理,这里只涉及index.html和相关的js,具体main.js的知识请大家查看electron相关的文档]
逻辑:(client.js)
2.基于nodeJs的socket编程
思路:
首先需要一个服务器,用来做中转服务,并做一些逻辑判断,从而达到一对一聊天的目的
客户端只需连接服务器,制定一定的数据格式进行发送数据即可
具体的界面则用electron来处理
服务器代码:
var net = require('net'); // 使用net模块(创建TCP的SOCKET) var PORT = 8080; //端口参数 var server = net.createServer(); //创建一个tcp的服务器 var room = [];//定义一个聊天室的数组 //on函数作用是监听函数,第一个参数为监听的数据名,第二个是监听到后执行的回调函数 server.on('connection', function (socket) { //监听connect连接,即当客户端发起链接时,服务器捕获该链接,执行后面的函数 //客户端和服务器完成TCP链接后 会生成一个socket,这里作为回调的参数获取 console.log("new connection" + socket.remoteAddress + ':' + socket.remotePort); socket.on('data', function (data) { //给socket 添加监听事件,即当客户端和服务器连接上后 进行的传输皆用该socket 进行 var data = JSON.parse(data.toString().trim()); //JSON.parse 可将json字符串转换为json对象 【socket传输的时候只支持字符串/二进制】 //分别获取data内的内容 var from = data.from; var to = data.to; var msg = data.msg; //定制聊天室数组内存储的json的格式,用来限制1对1聊天 var singelRoom = { "name1": from, "name1S": socket, "name2": to } //如果聊天室为空 直接放入第一个单人聊天室json数据 if (room.length == 0) { room.push(singelRoom); } var flag = 0; // 遍历聊天室中的内容 for (var i in room) { //聊天室中存的是自己和对方的聊天信息 则执行 if ((room[i].name1 == from && room[i].name2 == to) || (room[i].name1 == to && room[i].name2 == from)) { flag = 1; //准确的存入自己的socket if(room[i].name1 == from){ room[i].name1S = socket; } if(room[i].name2 == from){ room[i].name2S = socket; } // 如果当前socket 和 单人聊天室json数据的信息一致 则获取第一方的socket if (room[i].name1S == socket) { if (room[i].name2S != null) { var toSocket = room[i].name2S; toSocket.write(msg); } else { //对方socket为空 说明对方没有发送data信息,这里没有保存他的socket信息(可以理解为对方发送消息才算上线,这里就算未上线) socket.write("等待对方上线"); } } else { room[i].name2S = socket; if (room[i].name1S != null) { var toSocket = room[i].name1S; toSocket.write(msg); } else { socket.write("等待对方上线"); } } } } if (flag == 0) { //console.log("first"); room.push(singelRoom); //console.log(room.length); socket.write("等待对方上线"); } }); //监听客户端的close事件(即下线) socket.on('close', function () { //从聊天室中找到当前的socket 并把它置为空 if(socket!=null){ for (var i in room) { if(room[i].name1S==socket){ room[i].name1S=null; } else if(room[i].name2S==socket){ room[i].name2S=null; } else{ break; } } } console.log('A client closed'); }); //监听socket错误,并打印 socket.on('error',(err)=>{ console.log("下线请求!"+err); }); }); server.on('error', function (err) { console.log('server error:', err.message); }); server.on('close', function () { console.log('server closed'); }); //服务器监听地址 0.0.0.0 端口8080 server.listen(PORT, '0.0.0.0');
客户端:
页面(index.html):[这里用的electron来处理,这里只涉及index.html和相关的js,具体main.js的知识请大家查看electron相关的文档]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>聊天室</title> <link rel="stylesheet" href="./lib/stone.css"> <style> body{ overflow: hidden; } h1{ font-size: 25px; font-weight: bold; } input{ border:1px solid gray; } textarea{ outline: 0; height: 128px; border-top: 1px solid gray; border-bottom: 1px solid gray; width: 96%; padding: 20px; margin: 0 auto; resize : none; } #content { display: none; } #start{ display: none; } #welcome{ width: 100%; height: 600px; text-align: center; color: white; } #welcome h1{ padding-top: 200px; } #welcome h4{ margin-top: 150px; font-size: 14px; } #welcome h5{ margin-top: 5px; font-size: 12px; } #start_box{ width: 400px; height: 200px; margin: 0 auto; text-align: center; } #start_box h1{ padding-top: 50px; margin-bottom: 100px; } #start_box p{ padding-bottom: 11px; } #start_box input{ height: 30px; text-align: center; } #sendBtn{ outline: 0; width:110px; height: 40px; line-height: 40px; text-align: center; } #chatMsg{ width: 90%; margin: 0 auto; padding: 20px; height: 290px; overflow: auto; } #sendMsg{ float: right; position: relative; right: 10px; width: 80px; height: 30px; line-height: 30px; border: 1px solid grey; } From,To{ width:100%; font-size: 12px; margin-bottom: 5px; } .title{ font-weight: bold; font-size: 16px; } </style> </head> <body> <div id="welcome" class="lightBlue"> <h1>局 域 网 聊 天 室</h1> <h4>正在进入...</h4> <h5>by 袁浩宇/李雪可(echoun)</h5> </div> <div id="start"> <div id="start_box"> <h1 class="tc">欢迎使用聊天室软件</h1> <p>请输入当前用户号码:</p><input type="text" id="from"><br/><br/> <p>请输入对方用户号码:</p><input type="text" id="to"><br/><br/> <button id="sendBtn" class="Sbs">开始聊天</button> </div> </div> <div id="content"> <div id="chatMsg"></div> <div id="txt"> <textarea name="" id="msg"></textarea><br/> <button id="sendMsg" onclick="sendMsg()">发送</button> </div> </div> </body> <script> // You can also require other files to run in this process require('./client.js') </script> </html>
逻辑:(client.js)
var net = require('net'); var PORT = 8080; var From, To; var Msg = null; //显示逻辑(4s后welcome的div 隐藏 start的div 显示) setTimeout(function () { document.getElementById("welcome").style.display = "none"; document.getElementById("start").style.display = "block"; }, 4000) //创建客户端(需要制定port,即服务器监听的port 还有就是host参数,这里我没有写 默认为127.0.0.1 如果要局域网通信则写服务器的地址,其他的默认值具体可以去看官方文档) var client = net.connect({port: PORT}, function () { document.getElementById('sendBtn').onclick = function () { //获取from 和 to 的值 From = document.getElementById("from").value; To = document.getElementById("to").value; if (From == To && From != "") { alert("请输入不一样的号码!"); return 0; } if (From == "" || To == "") { alert("输入不能为空"); return 0; } document.title = From + '正在与' + To + '通话'; document.getElementById("start").style.display = "none"; document.getElementById("content").style.display = "block"; } document.getElementById('sendMsg').onclick = function () { var myDate = new Date(); Msg = document.getElementById("msg").value; if(Msg==""){ alert("输入空值给你的小伙伴看,并没有什么意义哦!"); return 0; } //定义要发送数据的格式 var send = { from: From, to: To, msg: Msg }; client.on('error', function (err) { alert('请检查服务器是否正确启动!'); console.log(err); }); //将自己发出的数据 显示在页面中 var textNodeTo = document.createElement('div'); textNodeTo.innerHTML = '<p class="title">' + From + ' - 【Time ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds() + '】</p>' + '<p>' + Msg.toString() + '</p>'; textNodeTo.className = 'To tr tblue'; var parentNode = document.getElementById("chatMsg"); parentNode.appendChild(textNodeTo); // socket的写操作,注意传输时转换成字符型 client.write(JSON.stringify(send)); document.getElementById("msg").value = null; }; }); //监听data,及获取服务器发来的信息 client.on('data', function (data) { // 显示在页面上 var myDate = new Date(); var textNodeFrom = document.createElement('div'); textNodeFrom.innerHTML = '<p class="title">' + To + ' - 【Time ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds() + '】</p>' + '<p>' + data.toString() + '</p>'; textNodeFrom.className = 'From tl tgreen'; var parentNode = document.getElementById("chatMsg"); console.log(textNodeFrom); parentNode.appendChild(textNodeFrom); console.log(data.toString()); }); client.on('end', function () { console.log('Disconnected from server'); //alert(1); process.exit(); });
相关文章推荐
- 利用socket.io实现多人聊天室(基于Nodejs)
- 基于NodeJS的秘室聊天室
- 开发一个基于DCOM的局域网聊天室(三)
- 重复造轮子之基于nodejs的聊天室
- 基于EPOLL模型的局域网聊天室和Echo服务器
- nodejs 基于socket.io实现聊天室
- 利用socket.io实现多人聊天室(基于Nodejs)
- 基于java编写局域网多人聊天室
- 基于Nodejs利用socket.io实现多人聊天室
- java基于socket的组播协议实现代码(局域网聊天室)
- 一个简易的基于局域网的聊天室程序
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- 基于Socket的局域网简易聊天室
- 基于UDP套接字的局域网聊天室
- 基于UDP的局域网聊天室
- 开发一个基于DCOM的局域网聊天室(三)
- 基于java编写局域网多人聊天室
- 开发一个基于DCOM的多房间局域网聊天室
- 开发基于NodeJS的秘室聊天室