基於NodeJs的區域網聊天室
阿新 • • 發佈：2019-01-26
1.該系統基於nodeJs,electron旨在開發一個桌面端的簡單聊天系統(1對1)
2.基於nodeJs的socket程式設計
思路：
首先需要一個伺服器，用來做中轉服務，並做一些邏輯判斷，從而達到一對一聊天的目的
客戶端只需連線伺服器，制定一定的資料格式進行傳送資料即可
具體的介面則用electron來處理
伺服器程式碼：
var net = require('net'); // 使用net模組（建立TCP的SOCKET）
var PORT = 8080; //埠引數
var server = net.createServer(); //建立一個tcp的伺服器 客戶端：
頁面（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();
});