socket

 1 服务器端
 2 // 1. 引入包
 3 const socketIO = require(‘socket.io‘);
 4 // 2.针对 http server  生成 socket.IO  实例对象
 5 const io = socketIO(server);
 6 
 7 // 3. 建立连接
 8 io.on(‘connection‘, (socket)=>{
 9      console.log(‘建立连接成功!‘);
10      // 3.1 返回消息
11      socket.emit(‘msg‘, ‘您好, 我是小撩! 有什么可以帮您~‘);
12      // 3.2 接收客户端的消息
13      socket.on(‘msg‘, (data)=>{
14          let msg = backMsg(data);
15          socket.emit(‘msg‘, msg);
16      });
17 });
18 
19 
20 // 4. 根据用户输入, 返回信息
21 let backMsg = (data)=>{
22   let msg = null;
23   switch (data){
24     case ‘小撩‘:
25       msg =  ‘我在呢...‘;
26       break;
27     case ‘明天天气‘:
28       msg =  ‘上海市明天天气可能不太好, 最低气温为21°, 有暴风雨!‘;
29       break;
30     case ‘你好‘:
31       msg =  ‘下午好!‘;
32       break;
33     case ‘唱首歌‘:
34       msg =  ‘我说的比唱的好听!‘;
35       break;
36     case ‘你很聪明‘:
37       msg =  ‘哪里!哪里!‘;
38       break;
39     case ‘视频下载‘:
40       msg =  ‘打开网站www.itlike.com, 里面有很多资源下载!‘;
41       break;
42     case ‘你是女的吗‘:
43       msg =  ‘废话, 我不是女的, 还是男的不成~‘;
44       break;
45     case ‘我好喜欢你哦‘:
46       msg =  ‘我看过那么多云, 你是最灵动的那一朵!‘;
47       break;
48     default:
49       msg = ‘小撩正在努力升级中...‘;
50   }
51   return msg;
52 };

 1 客户端
 2  <script src="/socket.io/socket.io.js"></script>
 3     <script>
 4         // 1. 建立连接
 5         var socket = io.connect(‘http://localhost:3000/‘);
 6         socket.on(‘connect‘, (data)=>{
 7             console.log(data);
 8             // 1.1 打开通道
 9             socket.emit(‘open‘);
10         });
11 
12         // 2. 监听
13         socket.on(‘msg‘, (data)=>{
14             console.log(data);
15             dealWithMsg(‘service‘, data);
16         });
17 
18         $(‘#btn_send‘).on(‘click‘, ()=>{
19              // 1. 获取内容
20             let msg = $(‘#msg‘).val();
21             // 2. 显示到界面
22             dealWithMsg(‘custom‘, msg);
23             // 3. 发送数据给服务器
24             socket.emit(‘msg‘, msg);
25             // 4. 清空输入框
26             $(‘#msg‘).val(‘‘);
27         });
28 
29         // 3. 信息处理
30         let dealWithMsg = (className, data)=>{
31             // 3.1 创建li标签
32             let $liDom = $(‘<li>‘);
33             $liDom.attr({
34                ‘class‘:  className
35             });
36 
37             // 3.2 创建li标签
38             let $span = $(‘<span>‘);
39             $span.attr({
40                 ‘class‘:  ‘chat-msg‘
41             });
42             $span.text(data);
43             $liDom.append($span);
44 
45             $(‘#chatList‘).append($liDom);
46 
47             // 让滚动条在最底部显示
48             let scrollHeight = $(‘#chatList‘)[0].scrollHeight;
49             $(‘#chatList‘).scrollTop(scrollHeight);
50         };
51     </script>