Express_html_socket.io

最新推荐文章于 2024-08-08 20:43:09 发布

现实里的大梦想家

最新推荐文章于 2024-08-08 20:43:09 发布

阅读量149

点赞数

文章标签： html5 html node.js

本文链接：https://blog.csdn.net/qq_51717117/article/details/120218774

版权

1.初始化和安装项目依赖

npm init //注意license写MIT
npm i express socket.io
npm i -D nodemon //自动重启服务器

//package.json修改一下
"scripts": {
        "start": "node server.js",
        "dev": "nodemon server.js"
    },
//这样直接写npm run dev，替代了node server.js

2.server.js

const express = require('express')
const app = express()
const server = require('http').createServer(app)

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})
const port = process.env.PORT

server.listen(port, () => {
    console.log('server is running ')
})

创建好了服务器，加上socket

const express = require('express')
const app = express()
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})

io.on('connection', socket => {
    console.log('a user connected')

    socket.on('disconnect', () => {
        console.log('user disconnected')
    })
})

const port = process.env.PORT||5000
server.listen(port, () => {
    console.log('server is running ')
})

3.写html

手册 - Materialize - 中文站 (materializecss.cn)

=>html setup拷贝过来

=>CDN替换一下样式

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Let's Chat！</title>
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</body>

</html>

启动服务器，访问127.0.0.1:5000可以看到let's chat

最终代码：

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Let's Chat！</title>
</head>

<body>
    <nav>
        <div class="nav-wrapper teal lighten-2">
            <a href="" class="brand-logo center">Let's Chat</a>
        </div>
    </nav>
    <br><br>

    <div class="row">
        <div class="col s4">
            <h3 class="flow-text center teal-text text-lighten-1">
                CONNECTED USER </h3>
            <ul class="collection" id="user-list"></ul>
        </div>
        <div class="col s8" style="display:none">
            <div class="card bule-grey darken-1">
                <div id="messages" class=" card-content white-text ">
                    <div class="card-action white">
                        <form id="message-form">
                            <div class="input-field">
                                <textarea type="text" id="textarea" class="materialize-textarea"></textarea>
                                <label class="active" for="textarea">MESSAGE</label>
                            </div>
                            <div class="right-align">
                                <button class="btn waves-effect waves-light btn-small" type="submit" name="action">SEND
                                    <i class="material-icons right">send</i>
                                </button>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s8" style="display:block">
            <div class="card">
                <div class="card-content">
                    <span class="card-title teal-text text-lighten-1">Give yourself a nickname</span>
                    <form id="login-form">
                        <div class="input-field">
                            <input type="text" id="name">
                            <label class="active" for="name">Name</label>
                        </div>
                        <div class="right-align">
                            <button class="btn waves-effect waves-light btn-small" type="submit" name="action">Let's Chat!
                                <i class="material-icons right">chat</i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--Import jQuery before materialize.js-->
        <link rel=" stylesheet " href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css ">
</body>

</html>