介绍

常用API和监听事件

浏览器端

        <script src="/socket.io/socket.io.js"></script>
    <script>
        // 1. 建立连接
        var socket = io.connect('http://localhost:3000/');
        socket.on('connect', (data)=>{
            console.log(data);
            // 1.1 打开通道
            socket.emit('open');
        });
        // 2. 监听
        socket.on('msg', (data)=>{
            console.log(data);
            dealWithMsg('service', data);
        });
        $('#btn_send').on('click', ()=>{
             // 1. 获取内容
            let msg = $('#msg').val();
            // 2. 显示到界面
            dealWithMsg('custom', msg);
            // 3. 发送数据给服务器
            socket.emit('msg', msg);
            // 4. 清空输入框
            $('#msg').val('');
        });
        // 3. 信息处理
        let dealWithMsg = (className, data)=>{
            // 3.1 创建li标签
            let $liDom = $('<li>');
            $liDom.attr({
               'class':  className
            });
            // 3.2 创建li标签
            let $span = $('<span>');
            $span.attr({
                'class':  'chat-msg'
            });
            $span.text(data);
            $liDom.append($span);
            $('#chatList').append($liDom);
            // 让滚动条在最底部显示
            let scrollHeight = $('#chatList')[0].scrollHeight;
            $('#chatList').scrollTop(scrollHeight);
        };
    </script>

客户端

// 1. 引入包
const socketIO = require('socket.io');
// 2.针对 http server  生成 socket.IO  实例对象
const io = socketIO(server);
// 3. 建立连接
io.on('connection', (socket)=>{
     console.log('建立连接成功!');
     // 3.1 返回消息
     socket.emit('msg', '您好, 我是小撩! 有什么可以帮您~');
     // 3.2 接收客户端的消息
     socket.on('msg', (data)=>{
         let msg = backMsg(data);//返回的消息
         socket.emit('msg', msg);
     });
});