用NodeJs使用Io作一個聊天室

時間  2019-11-12
標籤 nodejs 使用 一個 聊天室 简体版
原文   原文鏈接
功能分析
咱們要作一個聊天室，簡單起見，就不作私聊的功能了，那麼咱們想要的功能能夠是這些：
  1. 每一個人有本身的暱稱，在進入聊天室的時候本身輸入。
  2. 每一個人均可以發言
  3. 有一個區域用來展現全部的發言，而且要實時更新
  4. 有人加入的時候提示xxx加入了羣聊
 
第一步，初始設定
 
1，在window安裝nodejs，這一步省。
 
2，檢查環境及安裝
 
npm config ls    //修改文件夾名
 
npm install express  //安裝express框架
 
npm install socket 
 
在E:\node_IM\development\node-chat當前目錄，多出一個node_modules目錄。
 
E:.
└─node-chat
    └─node_modules
        ├─express
        │  ├─lib
        │  │  ├─middleware
        │  │  └─router
        │  └─node_modules
        │      ├─.bin
        │      ├─accepts
        │      ├─array-flatten
        │      ├─body-parser
        │      │  └─lib
        │      │      └─types
        │      ├─bytes
        │      ├─content-disposition
        │      ├─content-type
        │      ├─cookie
        │      ├─cookie-signature
                ......    
        ├─socket.io
 
 
新建server.js文件在node-chat目錄。
 
 
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
 
演示效果：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程