3. socketio的基本用法

创建时间：2023-02-08 23:24

长度：1595

评论：0

初始化项目

mdkir socket-io-dom && cd socket-io-dom
npm init -y
yarn add socket.io
touch app.js
touch index.html // 初始化html结构即可

app.js

const http = require('http')
var fs = require('fs');
const app = http.createServer();


app.on('request', (req, res) => {
    fs.readFile(__dirname + '/index.html', function(err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Error loading index.html');
        }
        res.writeHead(200);
        res.end(data);
    })
})
const io = require('socket.io')(app);
// 监听用户连接事件
io.on('connection', socket => {
    console.log('新用户连接成功');

    // socket.emit() 表示给浏览器发送数据
    // 参数1：事件的名字
    socket.emit('send', { name: 'dangdang' })
})


app.listen(3000, () => {
    console.log('服务器启动成功！')
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io('http://localhost:3000');

        socket.on('send', data => {
            console.log(data, 'data')
        })
    </script>
</body>
</html>

socket.emit

表示触发某个事件

何时：客户端给服务器发送数据时，服务端给客户端发送数据时使用socket.emit

事件名可以任意起

io.on('connection', socket => {
    socket.emit('事件名', 发送的数据)
})

socket.on

表示监听某个事件

何时：客户端需要接收服务端数据时，服务端需要接收客户端数据时使用socket.on

事件名可以任意起

io.on('connection', socket => {
    socket.on('事件名', (data) => {
        console.log(data)
    })
})

io.emit()

给所有连接了socket的用户发消息

const io = require('socket.io')(app);
io.emit('事件名', 发送数据);

评论（共0条）