[Nodejs]利用Socket.IO配合Express4搭建即時聊天

時間 2019-11-19

標籤 nodejs 利用 socket.io socket 配合 express4 express 搭建即時聊天欄目系統網絡简体版

原文原文鏈接

Socket.IO爲WebSockets這個較新的web技術提供了必要的支持，包含客戶端與服務端模塊，以便創建通訊通道，固然也可做爲中間件而存在。html

1 建立一個express項目

‍‍‍‍‍‍‍‍‍ ‍‍‍‍‍ 防工具盜鏈抓取【若是顯示此文字，表明來自第三方轉發】 freddon全部 ‍‍‍ ‍‍‍‍‍‍‍‍‍‍‍node

能夠使用命令行初始化一個express項目 web

先安裝expressexpress

npm install express

npm install express-generator

express 項目名

cd 項目名

npm install socket.io

也能夠在webstorm下新建express項目 File- new Project - Node.js Express Appnpm

建立好後文件視圖大概是這樣瀏覽器

2 服務端修改默認的文件內容

修改routes文件夾下的index.js爲 chat.js服務器

var express = require('express');
var router = express.Router();
var socket_io = require('socket.io');

/* GET users listing. */
router.get('/', function (req, res, next) {
    res.send('respond with a resource');
});


router.prepareSocketIO = function (server) {
    var io = socket_io.listen(server);
    io.sockets.on('connection', function (socket) {

        socket.on('join', function (user) {
            socket.user = user;
            socket.emit('state', 'SERVER', true);
            socket.broadcast.emit('state', 'SERVER', user + '上線了');
        });
        socket.on('sendMSG', function (msg) {
            socket.emit('chat', socket.user, msg);
            socket.broadcast.emit('chat', socket.user, msg);
        });

    });

};

module.exports = router;

修改app.js中app

var index = require('./routes/index');

app.use('/index', index);

爲socket

var chat = require('./routes/chat');

app.use('/chat', chat);

接下來就須要在app.js中寫一個方法了，用來傳遞serverwebstorm

 app.ready=function(server){
  chat.prepareSocketIO(server);
};

module.exports = app;

進入bin/www,添加內容：

var server = http.createServer(app);

app.ready(server); //添加這句

3 客戶端

網頁配合socket.io,網頁client.html置於public文件夾下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        table {
            width: 100%;
        }

        table.tool {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
        }

        #content {
            height: auto;
            padding: 10px;
            padding-bottom: 32px;
        }

        #content tr {
            margin-bottom: 10px;
        }
        #textContent {
            border: 1px solid grey;
            border-radius: 5px;
            padding: 6px;
        }

        .left {
            width: 88%;
        }

        #send {
            width: auto;
            padding: 2px 12px;
            line-height: 26px !important;
            border-radius: 5px;
            font-weight: bold;
            color: white;
            background-color: #ff4400;
        }

        tr.align-left td > span {
            float: left;
        }

        tr.align-left td > span span {
            display: inline-block;
        }

        tr.align-right td > span {
            float: right;
        }

        tr.align-right td > span span {
            display: inline-block;
        }

        span.msg {
            padding: 6px;
            background-color: #00B7FF;
            border: 1px solid #00B7ee;
            border-radius: 5px;
        }

        .timer {
            display: block;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <table id="content">
    </table>
</div>

<table class="tool">
    <tr>
        <td class="left">
            <div id="textContent" contenteditable="true" type="text"></div>
        </td>
        <td>
            <button id="send">發送</button>
        </td>
    </tr>
</table>
<script>
    var socket = io.connect('http://127.0.0.1:3000');
    var userName = "訪客某某";
    socket.on('connect', function () {
        userName = prompt("請輸入你的姓名?") || userName;
        socket.emit('join', userName);
    });
    socket.on('chat', function (user, data) {
        var p = document.createElement('tr');
        var direct = 'align-left';
        if (user === userName) {
            direct = 'align-right';
            p.innerHTML = '<td><span><span >' + data + '</span> <span>' + user + '</span></td><span></span>';
        } else {
            p.innerHTML = '<td><span> <span>' + user + '</span>   <span>' + data + '</span><span></span></td>';
        }
        p.className = direct;
        $('#content').appendChild(p);
    });

    $('#send').addEventListener('click', function (target) {
        var content = $('#textContent').innerHTML;
        if (content = content.replace(" ", "")) {
            socket.emit('sendMSG', content);
            $('#textContent').innerHTML = "";
        }
    });

    function $(flag) {
        return document.querySelector(flag);
    }
</script>

</body>
</html>

4 測試

www文件中默認端口號爲3000

運行bin/www

cd bin
node www

或者在webstorm中右鍵Run 'bin/www'

接下來，使用瀏覽器開兩個(+)標籤訪問 http://localhost:3000/client.html （若是測試局域網，將localhost替換爲服務器的ip，下同）

首先分別輸入用戶，而後就能夠輸入文字進行聊天啦，其餘的上線、消息提醒功能我刪掉了，僅保留聊天。

放張效果圖：

可能出現的問題：

網頁加載socket.io 404

請不要修改script中的src ，若是不是用端口3000訪問

如 http://localhost:63342/項目/public/client.html 請修改socket.io script的 src 爲

<script src="http://localhost:3000/socket.io/socket.io.js"></script>

本例代碼已經比較少了，嫌麻煩的話須要源碼請Email ：gsiner@live.com;

轉載請註明：https://www.snackblogs.com/articles/20

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。