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