用NodeJs使用Io做一個聊天室
阿新 • • 發佈：2019-03-03
功能分析
我們要做一個聊天室，簡單起見，就不做私聊的功能了，那麼我們想要的功能可以是這些：
3，在vscode環境除錯執行：
Administrator@7O1CMG3I79XXOLV MINGW64 /e/node_IM/development/node-chat
$ node server.js
listening on *:8080
第二步，聊天室頁面的實現
1，在index.html中輸入以下程式碼：
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: .5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list - style - type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>傳送</button>
</form>
</body>
</html>
儲存。
然後在index.html的script中新增以下程式碼，接受到新使用者加入事件的處理： <script> var name = prompt("請輸入你的暱稱："); function addLine(msg) { $('#messages').append($('<li>').text(msg)); } var socket = io(); //傳送暱稱給後端 socket.emit("join", name) //收到伺服器發來的join事件時 socket.on("join", function (user) { addLine(user + " 加入了群聊") }) //接收到伺服器發來的message事件 socket.on("message", function (msg) { addLine(msg) }) //當傳送按鈕被點選時 $('form').submit(function () { var msg = $("#m").val() //獲取使用者的資訊 socket.emit("message", '('+ name+'):'+msg) //將訊息傳送給伺服器 $("#m").val("") return false; //阻止form提交 }) </script> 現在我們再來測試一下，node server.js開啟後端服務，然後訪問localhost:8080，輸入使用者名稱iimT 演示效果：
- 每個人有自己的暱稱，在進入聊天室的時候自己輸入。
- 每個人都可以發言
- 有一個區域用來展示所有的發言，並且要實時更新
- 有人加入的時候提示xxx加入了群聊
3，在vscode環境除錯執行：
Administrator@7O1CMG3I79XXOLV MINGW64 /e/node_IM/development/node-chat
$ node server.js
listening on *:8080
第二步，聊天室頁面的實現
1，在index.html中輸入以下程式碼：
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: .5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list - style - type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>傳送</button>
</form>
</body>
</html>
儲存。
2，根目錄跳轉
前面我們在server.js中寫了根目錄返回hello world，現在我們讓它跳轉到聊天室頁面。將server.js中的 //當訪問根目錄時，返回Hello World app.get('/', function (req, res) { res.send('<h1>Hello world</h1>'); }); 替換為 app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); 然後在CMD中ctrl+c結束，重新執行node server.js。 現在在瀏覽器中訪問localhost:8080，已經跳轉到聊天頁面了。第三，引入Socket
1，繼續修改server.js，增加下方標註內容： var express = require('express'); var app = express(); var http = require('http').Server(app); //將express註冊到http中 var io = require('socket.io')(http); //當訪問根目錄時，返回Hello World app.get('/', function (req, res) { res.sendFile(__dirname+"/index.html"); }); var usocket = []; io.on('connection',function(socket){ console.log('a user connect'); //當有新的socket連線成功之後，就列印一下資訊。 }); //啟動監聽，監聽3000埠 http.listen(8080, function () { console.log('listening on *:8080'); }); 2，然後編輯index.html，新增jquery.min.js和socket.io.js <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> 然後我們重新啟動node服務，訪問localhost:3000。就會有以下結果。 第三，新增互動 當用戶有動作的時候，我們要顯示在聊天面板中，就插入一個li標籤好了。在index.html的script中寫一個方法，後面顯示什麼內容，就呼叫這個方法在面模板中插入一條li就好了。在前面功能分析的時候，我們就說使用者剛進來的時候，需要輸入自己的暱稱。 將以下程式碼寫到index.html中。 var name = prompt("請輸入你的暱稱："); function addLine(msg) { $('#messages').append($('<li>').text(msg)); }1，傳送暱稱資料到後端
新使用者傳送自己的暱稱給伺服器後，要讓所有處在聊天室的人知道，所以伺服器要發一個廣播。傳送資料給後端，呼叫socket的emit方法，這裡指定一個事件名字叫join，然後後端會處理這個事件。 然後現在我們的script標籤中是這樣的。 <script> var name = prompt("請輸入你的暱稱："); var socket = io() //傳送暱稱給後端 socket.emit("join", name) function addLine(msg) { $('#messages').append($('<li>').text(msg)); } </script>2，後端傳送廣播
為了在後端區分使用者，我們用一個usocket陣列來儲存每一個使用者的socket例項。 首先監聽join事件，在接收到暱稱之後，將該使用者的加入聊廣播給所有使用者。 server.js程式碼如下： var express = require('express'); var app = express(); var http = require('http').Server(app); //將express註冊到http中 var io = require('socket.io')(http); //當訪問根目錄時，返回Hello World app.get('/', function (req, res) { res.sendFile(__dirname+"/index.html"); }); var usocket = []; //全域性變數 io.on('connection',function(socket){ // console.log('a user connect'); //監聽join事件 socket.on("join", function (name) { usocket[name] = socket; console.log(usocket); io.emit("join", name) //伺服器通過廣播將新使用者傳送給全體群聊成員 }) //new addition socket.on("message", function (msg) { io.emit("message", msg) //將新訊息廣播出去 }) }); //啟動監聽，監聽3000埠 http.listen(8080, function () { console.log('listening on *:8080'); });然後在index.html的script中新增以下程式碼，接受到新使用者加入事件的處理： <script> var name = prompt("請輸入你的暱稱："); function addLine(msg) { $('#messages').append($('<li>').text(msg)); } var socket = io(); //傳送暱稱給後端 socket.emit("join", name) //收到伺服器發來的join事件時 socket.on("join", function (user) { addLine(user + " 加入了群聊") }) //接收到伺服器發來的message事件 socket.on("message", function (msg) { addLine(msg) }) //當傳送按鈕被點選時 $('form').submit(function () { var msg = $("#m").val() //獲取使用者的資訊 socket.emit("message", '('+ name+'):'+msg) //將訊息傳送給伺服器 $("#m").val("") return false; //阻止form提交 }) </script> 現在我們再來測試一下，node server.js開啟後端服務，然後訪問localhost:8080，輸入使用者名稱iimT 演示效果：