软件系统开发定制【node进阶】在node.js中优雅的使用Socket.IO模块

✅ 作者简介:软件系统开发定制一名普通本科大三的学生,软件系统开发定制致力于提高前端开发能力
✨ 个人主页:
🔥 系列专栏 :
⭐️ 个人社区 :
🍀 学习格言: ☀️ 软件系统开发定制打不倒你的会使你更强!☀️



🔥前言

软件系统开发定制上篇文章中结合websokcet软件系统开发定制进行了简单的聊天小案例,软件系统开发定制但是我们可以发现使用ws软件系统开发定制模块来写代码的时候未免有一些繁琐,需要我们自己去设置type,使用后事件监听将会十分的简单便捷,很好的弥补了ws模块的缺陷。


📃目录

Socket.IO的定义

Socket.IO是一个WebSocket库,包括了客户端的js服务器端的node.js,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。

Socket.IO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口,也就是说,我们在使用SocketIO时,不用担心兼容问题,底层会自动选用最佳的通信方式


Socket.IO的优点

  1. socket.io封装了服务端和客户端,使用起来非常简单方便。
  2. socket.io支持跨平台,这就意味着你有了更多的选择,可以在自己喜欢的平台下开发实时应用。
  3. socket.io可以自定义事件发送到对端,对端可以是服务器,可以是客户端;使用emit发送,接收还是on
  4. 它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5。如果不支持websocket,可以自动降级为轮询

中安装Socket.IO

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

npm i socket.io
  • 1

node中使用Socket.IO

emiton 是最重要的两个api,分别对应 发送监听 事件.

我们可以非常自由的在服务端定义并发送一个事件emit,然后在客户端监听 on,反过来也一样。

发送的内容格式也非常自由,既可以是基本数据类型 Number,String,Boolean 等,也可以是 Object,Array 类型,甚至还可以是函数。而用回调函数的方式则可以进行更便携的交互。

emit

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

socket.emit('aaa','你好,前台')
  • 1

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

注意: 第二个参数可以传对象,因为在emit方法内部带有JSON.stringfy()方法,自动将对象转化为字符串。

on

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

socket.on('aaa',(msg)=>{	console.log(msg)})
  • 1
  • 2
  • 3

在这里以客户端为例,客户端监听服务端的事件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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在客户端需要单独引用socket.io.js文件,因为socket.io不是浏览器内置模块,需要单独引用,js文件内部代码 ==> ,将这里的代码复制到自己创建的js文件中,然后在客户端中引用。
只要在客户端中出现const socket = io(),浏览器将会直接默认连接到客户端启动的本地服务地址。


小结

socket.io这个第三方模块相对来说,书写代码的时候更加的方便与高效,在ws模块中通过switch分支来进行对不同的聊天类型进行不同的方法呈现,而在socket.io模块中仅仅通过自定义事件就可以解决这个问题,并且socket.io可以在服务器断开后,当你再次进入客户端后可以自动连接,整体的表现优于ws模块。

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


👑书写不易,希望大家能够给予三连支持,期待我更好的文章哟👑

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发