基于NodeJs的局域網(wǎng)聊天室

1.該系統(tǒng)基于nodeJs,electron旨在開發(fā)一個桌面端的簡單聊天系統(tǒng)(1對1)
2.基于nodeJs的socket編程

思路：
首先需要一個服務(wù)器，用來做中轉(zhuǎn)服務(wù)，并做一些邏輯判斷，從而達到一對一聊天的目的
客戶端只需連接服務(wù)器，制定一定的數(shù)據(jù)格式進行發(fā)送數(shù)據(jù)即可
具體的界面則用electron來處理

服務(wù)器代碼：

var net = require('net'); // 使用net模塊（創(chuàng)建TCP的SOCKET）
var PORT = 8080; //端口參數(shù)
var server = net.createServer(); //創(chuàng)建一個tcp的服務(wù)器
var room = [];//定義一個聊天室的數(shù)組

//on函數(shù)作用是監(jiān)聽函數(shù)，第一個參數(shù)為監(jiān)聽的數(shù)據(jù)名，第二個是監(jiān)聽到后執(zhí)行的回調(diào)函數(shù)
server.on('connection', function (socket) {  //監(jiān)聽connect連接，即當(dāng)客戶端發(fā)起鏈接時，服務(wù)器捕獲該鏈接，執(zhí)行后面的函數(shù)
//客戶端和服務(wù)器完成TCP鏈接后 會生成一個socket，這里作為回調(diào)的參數(shù)獲取
  console.log("new connection" + socket.remoteAddress + ':' + socket.remotePort);
  socket.on('data', function (data) { //給socket 添加監(jiān)聽事件，即當(dāng)客戶端和服務(wù)器連接上后 進行的傳輸皆用該socket 進行
    var data = JSON.parse(data.toString().trim()); //JSON.parse 可將json字符串轉(zhuǎn)換為json對象 【socket傳輸?shù)臅r候只支持字符串/二進制】
   //分別獲取data內(nèi)的內(nèi)容 
    var from = data.from;
    var to = data.to;
    var msg = data.msg;
 //定制聊天室數(shù)組內(nèi)存儲的json的格式，用來限制1對1聊天
    var singelRoom = {
      "name1": from,
      "name1S": socket,
      "name2": to
    }
 //如果聊天室為空 直接放入第一個單人聊天室json數(shù)據(jù)
    if (room.length == 0) {
      room.push(singelRoom);
    }
    var flag = 0;
// 遍歷聊天室中的內(nèi)容
    for (var i in room) {
//聊天室中存的是自己和對方的聊天信息 則執(zhí)行
      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;
        }
//  如果當(dāng)前socket 和 單人聊天室json數(shù)據(jù)的信息一致 則獲取第一方的socket
        if (room[i].name1S == socket) {
          if (room[i].name2S != null) {
            var toSocket = room[i].name2S;
            toSocket.write(msg);
          } else {
             //對方socket為空 說明對方?jīng)]有發(fā)送data信息，這里沒有保存他的socket信息（可以理解為對方發(fā)送消息才算上線，這里就算未上線）
            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("等待對方上線");
    }
  });

//監(jiān)聽客戶端的close事件（即下線）
  socket.on('close', function () {
    //從聊天室中找到當(dāng)前的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');
  });

//監(jiān)聽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');
});
//服務(wù)器監(jiān)聽地址 0.0.0.0  端口8080
server.listen(PORT, '0.0.0.0');

客戶端：
頁面（index.html）：[這里用的electron來處理，這里只涉及index.html和相關(guān)的js，具體main.js的知識請大家查看electron相關(guān)的文檔]

 <!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>局 域 網(wǎng) 聊 天 室</h1>
    <h4>正在進入...</h4>
    <h5>by 袁浩宇/李雪可(echoun)</h5>    
  </div>
  <div id="start">
    <div id="start_box">
      <h1 class="tc">歡迎使用聊天室軟件</h1>
      <p>請輸入當(dāng)前用戶號碼：</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()">發(fā)送</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)
 
//創(chuàng)建客戶端（需要制定port，即服務(wù)器監(jiān)聽的port 還有就是host參數(shù)，這里我沒有寫 默認為127.0.0.1 如果要局域網(wǎng)通信則寫服務(wù)器的地址，其他的默認值具體可以去看官方文檔）
 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;
     }
   //定義要發(fā)送數(shù)據(jù)的格式
     var send = {
       from: From,
       to: To,
       msg: Msg
     };
     client.on('error', function (err) {
       alert('請檢查服務(wù)器是否正確啟動！');
       console.log(err);
     });
   //將自己發(fā)出的數(shù)據(jù) 顯示在頁面中
     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的寫操作，注意傳輸時轉(zhuǎn)換成字符型
     client.write(JSON.stringify(send));
     document.getElementById("msg").value = null;
   };

 });

//監(jiān)聽data，及獲取服務(wù)器發(fā)來的信息
 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");
   parentNode.appendChild(textNodeFrom);
 });

 client.on('end', function () {
   console.log('Disconnected from server');
   process.exit();
 });

總體來說這里還是講的比較啰嗦啦，如果想直接使用，可以通過下面的傳送門。

傳送門：https://github.com/yuanhaoyu/Chatroom （覺得不錯可以star 支持一哈）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 開始教程之前，請允許我假設(shè)你已經(jīng)有了一個常用的的編輯器（或者 IDE），系統(tǒng)中也安裝了Node.js 和 npm，...
    程序人生_小龍閱讀 50,213評論 1贊 38
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,569評論 19贊 139
  • 這個暑期我過的超有意義了，現(xiàn)在先讓你們看看我做的小手工吧！ 暑期我經(jīng)常跟姐姐去體育館踢足球，運動。媽媽說要堅持鍛煉...
    Alice昔日豬豬閱讀 336評論 0贊 0
  • 六、一班 劉羽軒 人的生命是非常短暫的，我們出生到去世的過程就叫做一生。當(dāng)然，在這一生里我們可以忙忙碌碌無為，也...
    一花匠閱讀 431評論 0贊 0
  • 我的同學(xué)，大學(xué)同學(xué)，城里人，麥子和韭菜是分不清的。我們經(jīng)常和她開玩笑。有次上課，她又打破了我們的認知。 講課的時候...
    開心的靈通閱讀 848評論 0贊 0

友情鏈接更多精彩內(nèi)容