node之socket.io實現websocket協議的簡單例子

時間 2019-12-05

標籤 node socket.io socket 實現 websocket 協議簡單例子欄目系統網絡简体版

原文原文鏈接

node 的 socket.io模塊能幫助咱們快速的實現websocket通訊。javascript

1. app.js 使用的是express配合socket.io，因此下載好相對應的包html

let express = require('express')
let app = express()
let http = require('http').Server(app)
// 建立io對象，就能訪問socket.io.js文件let io = require('socket.io')(http)
let session = require('express-session')

app.use(session({            // 使用session是爲了後面頁面顯示權限
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true
}))
let allUser = []
app.set('view engine', 'ejs')
app.use(express.static('./public'))    // public放置了JQ文件
app.get('/', (req,res,next) => {
    res.render('index')
})

http.listen(3000)複製代碼

2. views/index.ejs 首頁，輸入姓名纔可進入發言java

<style>
    div {
        width: 700px;
        height: 3px;
        padding: 40px;
        border: 1px solid #000;
        margin: 0 auto;
    }
    #username {
        font-size: 30px;
    }
</style>
<body>
    <form action="/check" method="get">
      <input type="text" id="username" name="username" />
      <input type="submit" value="進入發言室" />  
    </form>
</body>複製代碼

3. app.js 首頁登陸邏輯node

app.get("check", (req,res,next) => {
    let username = req.query.username
    if(!req.query.username) {
        res.send('必須輸入用戶名')    // 沒有輸入就不給跳轉頁面
        return;
    } 
    // 使用一個數組存入每次登陸進去的用戶 若是重名就報錯 簡單模仿用戶重名 不須要的能夠去掉
    if(allUser.indexOf(username) != -1) {
        res.send('用戶名被佔用')
        return;
    }
    allUser.push(username)
    req.session.username = username
    res.redirect('/chat')    // 輸入用戶名後就能夠進入發言室發言
})複製代碼

4. views/chat.ejs 發言室jquery

<style>
    .operate {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 100px;
        background: #ccc;
        width: 100%;
    }
    .operate input {
        font-size: 30px;
    }
    .operate input[type=text] {
        width: 100%;
    }
</style>
<body>
    <h1>小小發言室 歡迎：<span id="user"><%= username %></span></h1>
    <div><ul class="list"></ul></div>
    <div class="operate"><input type="text" id="content" /></div>
    // 引入須要的js文件  相對的地址是 http://127.0.0.1:3000
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>    
    <script type="text/javascript" src="/jquery-1.11.3.min.js"></script>

    <script>
        let socket = io()
        $('#content').keydown((e) => {
            // 輸入回車發言  就觸發chat鏈接事件 把當前的用戶名和發言內容傳遞過去
            if(e.keydown == 13) {
                socket.emit('chat', {
                'content': $('#content').val();
                'user': $('#user').html()
                })
                $(this).val('')
            }
        })
        // 監聽到廣播 就把獲取到的內容渲染在頁面 就能夠實現發言了。
        socket.on('chat', (msg) => {
            $('.list').prepand(`<li><b>${msg.user}:</b>${msg.content}</li>`)
        })
    </script>

</body>複製代碼

5. app.js 完善好socket事件以及chat路由web

app.get('/chat', (req,res,next) => {
    // 登陸了就把username保存在session 若是未登陸就不給進入發言
    if(!req.session.username) {
        res.redirect('/')
        return;
    }
    res.render('chat', {
        'username': req.session.username
    })
})

io.on('connection', (socket) => {
    socket.on('chat', (msg) => {
        // 把接收到的 msg 原樣的廣播回去
        io.emit('chat', msg)
    })
})複製代碼

這樣就大功告成了，實現一個簡單的websocket通信。過程就是須要用到socket.io模塊，引入後監聽事件，而後做出響應，就實現了通信。express

相關標籤/搜索

每日一句

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