安装依赖包

cnpm i socket.io express -S

编码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>来聊天呀！</h2>
    <button id="btn">添加购物车</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script>
    <script>
        let btn = document.querySelector('#btn');
        const socket = io();
        btn.onclick = function () {
            socket.emit('addCart', {
                title: 'node.js'
            })
        }
        //监听服务器的广播事件
        socket.on('to-client', (data) => {
            console.log(data);
        });
    </script>
</body>

</html>

server.js

const express = require('express');
const app = express();
//引入
const http = require('http').createServer(app);
const io = require('socket.io')(http);
//设置静态目录
app.use('/', express.static(__dirname + '/static'));
app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
})

io.on('connection', socket => {
    console.log('建立服务器端的连接');
    //绑定添加购物车的事件
    socket.on('addCart', function (data) {
        console.log(data);
        //响应客户端  io.emit()给所有用户返回消息，socket.emit()给当前用户返回消息
        io.emit('to-client', {
            server: '服务端的响应数据'
        })
    })
});

//使用包装后的app进行监听
http.listen(3000, () => {
    console.log('listen on 3000 port！');
})

4.Socket.io简单使用

安装依赖包

编码