✅ 作者简介：一名普通本科大三的学生    
    
    
    
，致力于提高前端开发能力

✨ 个人主页：前端小白在前进的主页

🔥 系列专栏 ： node.js学习专栏

⭐️ 个人社区 : 个人交流社区

🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️

🔥前言

上篇文章中结合websokcet进行了简单的聊天小案例  


     


     


     


   ，但是我们可以发现使用ws模块来写代码的时候未免有一些繁琐


 




 




 




 

，需要我们自己去设置type,使用socket.io后事件监听将会十分的简单便捷   

   

   

   

，很好的弥补了ws模块的缺陷 
    
    
    
   。

Socket.IO的定义

Socket.IO是一个WebSocket库   

     

     

     

  ，包括了客户端的js和服务器端的node.js



  




  




  




  
，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用
     


     


     


     

。

Socket.IO将WebSocket 
    
    
    
   、AJAX和其它的通信方式全部封装成了统一的通信接口  


  


  


  


，也就是说    
     
     
     
 ，我们在使用SocketIO时




   




   




   




   ，不用担心兼容问题 



 



 



 



，底层会自动选用最佳的通信方式 




 




 




 




。

Socket.IO的优点

socket.io封装了服务端和客户端                    ，使用起来非常简单方便 

   

   

   

  。 socket.io支持跨平台




    




    




    




    ，这就意味着你有了更多的选择



















，可以在自己喜欢的平台下开发实时应用
     

     

     

     
。 socket.io可以自定义事件发送到对端                    ，对端可以是服务器 



     



     



     



    ，可以是客户端；使用emit发送



















，接收还是on  




  




  




  




。 它会自动根据浏览器从WebSocket
     


     


     


     

、AJAX长轮询 




 




 




 




、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用    
    
    
    
，非常方便和人性化  


     


     


     


   ，而且支持的浏览器最低达IE5.5 


  


  


  


 。如果不支持websocket


 




 




 




 

，可以自动降级为轮询

node中安装Socket.IO

打开终端   

   

   

   

，在终端中输入以下代码即可安装Socket.IO模块:

npm i socket.io

node中使用Socket.IO

emit 和 on 是最重要的两个api   

     

     

     

  ，分别对应 发送 和 监听 事件.

我们可以非常自由的在服务端定义并发送一个事件emit



  




  




  




  
，然后在客户端监听 on  


  


  


  


，反过来也一样
     
     
     
     。

发送的内容格式也非常自由    
     
     
     
 ，既可以是基本数据类型 Number




   




   




   




   ，String 



 



 



 



，Boolean 等                    ，也可以是 Object




    




    




    




    ，Array 类型



















，甚至还可以是函数   




   




   




   




。而用回调函数的方式则可以进行更便携的交互 



 



 



 



。

emit

socket.emit(eventName[, ...args])：发射（触发）一个事件

socket.emit(aaa,你好                    ，前台)

在这里以服务端为例子:在服务端中通过socket.emit()方法创立一个事件(第一个参数:自定义事件)aaa,发送的信息(第二个参数) 你好 



     



     



     



    ，前台.

注意： 第二个参数可以传对象



















，因为在emit方法内部带有JSON.stringfy()方法    
    
    
    
，自动将对象转化为字符串                    。

on

socket.on(eventName, callback)：监听一个 emit 发射的事件

socket.on(aaa,(msg)=>{ console.log(msg) })

在这里以客户端为例  


     


     


     


   ，客户端监听服务端的事件aaa


 




 




 




 

，随后通过回调函数的方式打印出aaa传过来的信息
    




    




    




    



。

在express中引入使用

服务端

const server = require(http).createServer(app); const io = require(socket.io)(server); io.on(connection, socket => { console.log(恭喜你连接成功！) socket.on("message",(msg)=>{ console.log(msg) //你好 后台 //注意 ： 这里的 io.emit() 是默认转发给全部客户端信息   

   

   

   

，所有客户端都可以收到 io.emit("allMsg","广播 : 欢迎来到聊天室") }) }); server.listen(3000);

将server当作参数传入   

     

     

     

  ，目的在于说明io挂载的服务依旧是基于http的



















。

这里的代码表示



  




  




  




  
，只要连接成功,就会打印连接成功的信息！

客户端

<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); //默认连接服务端启动的本地端口地址 socket.emit("message","你好 后台") // 监听服务端的广播事件  


  


  


  


，接收广播的消息 socket.on("allMsg",(msg)=>{ console.log(msg) //广播 : 欢迎来到聊天室 }) </script>

在客户端需要单独引用socket.io.js文件    
     
     
     
 ，因为socket.io不是浏览器内置模块




   




   




   




   ，需要单独引用 



 



 



 



，js文件内部代码 ==> socket.io.js内部代码                    ，将这里的代码复制到自己创建的js文件中




    




    




    




    ，然后在客户端中引用                    。

只要在客户端中出现const socket = io(),浏览器将会直接默认连接到客户端启动的本地服务地址
     



     



     



     


。

小结

socket.io这个第三方模块相对来说



















，书写代码的时候更加的方便与高效                    ，在ws模块中通过switch分支来进行对不同的聊天类型进行不同的方法呈现 



     



     



     



    ，而在socket.io模块中仅仅通过自定义事件就可以解决这个问题



















，并且socket.io可以在服务器断开后    
    
    
    
，当你再次进入客户端后可以自动连接  


     


     


     


   ，整体的表现优于ws模块



















。

下篇文章将会对群聊和私聊进行"socket.io化"升级！

👑书写不易


 




 




 




 

，希望大家能够给予三连支持   

   

   

   

，期待我更好的文章哟👑