socket

服务器端
// 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);
     });
});


// 4. 根据用户输入, 返回信息
let backMsg = (data)=>{
  let msg = null;
  switch (data){
    case '小撩':
      msg =  '我在呢...';
      break;
    case '明天天气':
      msg =  '上海市明天天气可能不太好, 最低气温为21°, 有暴风雨!';
      break;
    case '你好':
      msg =  '下午好!';
      break;
    case '唱首歌':
      msg =  '我说的比唱的好听!';
      break;
    case '你很聪明':
      msg =  '哪里!哪里!';
      break;
    case '视频下载':
      msg =  '打开网站www.itlike.com, 里面有很多资源下载!';
      break;
    case '你是女的吗':
      msg =  '废话, 我不是女的, 还是男的不成~';
      break;
    case '我好喜欢你哦':
      msg =  '我看过那么多云, 你是最灵动的那一朵!';
      break;
    default:
      msg = '小撩正在努力升级中...';
  }
  return msg;
};

客户端
 <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>