我写了一个IM聊天室？我会爬虫了？就这？

绝地灬酷狼 2023-06-15 12:28 4阅读 0赞

大概是去年吧，因为没什么工作任务在掘金划水摸鱼的时候看到了一篇用node实现爬虫和使用socket.io实现简易聊天室的文章。  
昨天听线上直播课的时候老师又提到了这两个东西，我一想这是基操啊。  
![fly][]  
写出来给大家分享一下，看过的就略过吧，没看过的其实也真的没啥，就是用一些现成的工具和库写你想要的效果。

### 简易聊天室 ###

*  使用工具(前端)：vue-cli socket.io-client bootstrap(index.html cdn引用)
 *  使用工具（后端）：express socket.io
 *  前端主要代码(不包括页面渲染)：
 *  `import io from 'socket.io-client';`

data() {
           return {
               socket : io('localhost:3001'),
           }
       }
         methods: {
           sendMessage(e) {
               e.preventDefault();
               
               this.socket.emit('SEND_MESSAGE', {
                   user: this.user,
                   message: this.message
               });
               this.message = ''
           }
       },
       mounted() {
           this.socket.on('MESSAGE', (data) => {
               this.messages = [...this.messages, data];
           });
       }

*  后端主要代码：(不包括搭建express服务器)

const io = require('socket.io')(server);
    
    io.on('connection', function(socket) {
      socket.on('SEND_MESSAGE', function(data) {
          io.emit('MESSAGE', data)
      });
    });

*  实现效果：
 *  ![简易聊天室][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDYzNDgz_size_16_color_FFFFFF_t_70]

### 爬虫 ###

##### 爬虫就更简单了，我都不好意思管它叫爬虫了，就叫小东西吧。 #####

*  使用工具（后端）：express（搭建服务器） cheerio（服务器端的jquery） iconv-lite（转换编码格式的工具） superagent（服务器端请求url 可用http内置模块代替）
 *  具体步骤
    
     *  确定使用的语言 框架 工具（package.json中安装）
     *  确定爬取对象(url地址)
     *  分析页面内容（目标数据/DOM结构）
     *  写代码，测试，展示爬取数据
 *  实现效果
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDYzNDgz_size_16_color_FFFFFF_t_70 1]
 *  完整代码见github  
    [github地址链接][github]

[fly]: https://img-blog.csdnimg.cn/20191122162637916.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDYzNDgz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122162315314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDYzNDgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDYzNDgz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112314144571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDYzNDgz,size_16,color_FFFFFF,t_70
[github]: https://github.com/shiy-liu/study