史上最短最敷衍的Nodejs教程(六)NPM模塊

什麼是NPM模塊?

NPM是Node.js的包管理工具,在NPM的官網==www.npmjs.com ==有成千上萬的包可供開發者下載和使用,NPM程序會在你安裝Node.js的時候安裝在你的計算機裏面


什麼是包?

包是在Node.js中你需要引入的模塊文件


下載包

下載一個包非常容易,打開命令行界面然後輸入npm命令進行包的安裝
包的安裝 npm install 包名

比如,下載用於搭建聊天室的websocket模塊

npm i nodejs-websocket

使用包

下載完成後就可以通過require(“包名”)的方式進行包的引入並使用

以websocket包爲例 >

var ws = require("nodejs-websocket")
 
// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
    console.log("新的連接已經建立!")
    conn.on("text", function (str) {
        console.log("接受到的字符串: "+str)
        conn.sendText(str+"!")
    })
    conn.on("close", function (code, reason) {
        console.log("連接已經關閉!")
    })
}).listen(8080)


搭建聊天室實戰

chat1.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .chatInfo {
            text-align: center;
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div id="mess" class="chatInfo">正在連接...</div>
    <hr>
    <input id="mes" type="text" /> <input id="send" type="button" value="發送">
    <script>
        var username = prompt("請輸入您的用戶名:");
        var mess = document.getElementById("mess");
        if (window.WebSocket) {
            var ws = new WebSocket('ws://127.0.0.1:8001');

            ws.onopen = function (e) {
                mess.innerHTML = "連接成功"
                console.log("連接服務器成功");
                ws.send("chat1");
            }
            ws.onclose = function (e) {
                console.log("服務器關閉");
            }
            ws.onerror = function () {
                console.log("連接出錯");
            }

            ws.onmessage = function (e) {
                var time = new Date();
                mess.innerHTML += time + "發來的消息:" + e.data + "<br>"
                document.querySelector("#send").onclick = function (e) {
                    var time = new Date();
                    ws.send(time + "/ <span style='color:red'>"+username+"</span>發來的信息:“" + document.querySelector("#mes").value + "”");
                    document.querySelector("#mes").value = "";
                }
            }
        }
    </script>
</body>

</html>

chat2.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .chatInfo {
            text-align: center;
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div id="mess" class="chatInfo"></div>
    <hr>
    <input id="mes" type="text" /> <input id="send" type="button" value="發送">
    <script>
        var username = prompt("請輸入您的用戶名:");
        var mess = document.getElementById("mess");
        if (window.WebSocket) {
            var ws = new WebSocket('ws://127.0.0.1:8001');

            ws.onopen = function (e) {
                mess.innerHTML = "連接成功"
                console.log("連接服務器成功");
                ws.send("chat2");
            }
            ws.onclose = function (e) {
                console.log("服務器關閉");
            }
            ws.onerror = function () {
                console.log("連接出錯");
            }

            ws.onmessage = function (e) {
                var time = new Date();
                mess.innerHTML += time + "發來的消息:" + e.data + "<br>"
                document.querySelector("#send").onclick = function (e) {
                    var time = new Date();
                    ws.send(time + "/ <span style='color:red'>"+username+"</span>發來的信息:“" + document.querySelector("#mes").value + "”");
                    document.querySelector("#mes").value = "";
                }
            }
        }
    </script>
</body>

</html>

chat.js

var ws = require("nodejs-websocket"); //引入websocket模塊
console.log("開始建立連接...")
var chat1 = null,
    chat2 = null,
    chat1Ready = false,
    chat2Ready = false;
var server = ws.createServer(function (conn) {
    conn.on("text", function (str) {
        console.log("收到的信息爲:" + str)
        if (str === "chat1") {
            chat1 = conn;
            chat1Ready = true;
            conn.sendText("success");
        }
        if (str === "chat2") {
            chat2 = conn;
            chat2Ready = true;
        }

        if (chat1Ready&&chat2Ready) {
            chat1.sendText(str);
            chat2.sendText(str);
        }

        conn.sendText(str)
    })
    conn.on("close", function (code, reason) {
        console.log("關閉連接")
    });
    conn.on("error", function (code, reason) {
        console.log("異常關閉")
    });
}).listen(8001)
console.log("WebSocket建立完畢");


在這裏插入圖片描述
發送情況截圖效果如下
在這裏插入圖片描述

史上最短最敷衍的Nodejs免費視頻教程

B站視頻講解演示地址 https://www.bilibili.com/video/BV1KT4y1g7FG/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章