我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

基于websocket的最出名的代码框架,就是socket.io了。Socket.IO是一个用于实时双向事件通信的库,它建立在 WebSocket协议之上,同时也支持其他一些传输方式(如轮询)。非常适合构建实时应用程序,比如聊天应用、实时通知系统、在线游戏等。

苏南大叔:Socket.io双向通信教程,基本使用方式范例 - socketio-demo
Socket.io双向通信教程,基本使用方式范例(图4-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。测试环境:win10nodejs@20.18.0express@4.21.2socket.io@4.8.1。虽然socket.io是在nodejs代码下出现并发展的,但是,其它高级编程语言(例如python),也是可以使用socket.io的。本文以nodejs为例进行演示。

socket.io 与 websocket

websocket并不是socket.iosocket.io也并不是websocket。两者虽然非常相似,但是并不是同样的事物。socket.io使用的基本部分,包括websocket,也包括传统的轮询。具体使用的协议,是根据实际情况而设定的。
socket.io相比较websocket而言,

  • 最大最明显的改进是“断线重连”,这个功能非常实用。
  • 自带广播功能,不用再次造轮子实现。

socket.io官网:

苏南大叔:Socket.io双向通信教程,基本使用方式范例 - socketio-www
Socket.io双向通信教程,基本使用方式范例(图4-2)

socket.io包括服务器端和客户端两部分,而websocket仅仅需要服务端引用,客户端是浏览器内置的。当然,存在一小部分浏览器不支持websocket的情况,这个时候,socket.io就显露出其重要性了。这里仅展示最基础的收发消息的socket.io的例子,其它的使用情况,后续补充。

服务端

npm i socket.io --save

socket.io可以单独使用,单独监听端口。比如:

const socketio = require("socket.io");
const io = socketio(3000);

运行是能运行,也确实可以对接。不过,对接的时候,因为和伺服的页面不在同一个域名(端口)下面,就会遇到各种各样的跨域问题,令人头疼。

所以,一般在启动socket.io服务的时候,会复用某个http服务的端口,以规避跨域问题。这里的socket.io以依赖最常见的express服务为例。

let express = require("express");
let app = express();
app.use(express.static('public'));
let expressServer = app.listen(80, () => console.log('http://localhost:%s', expressServer.address().port));
const socketio = require("socket.io");
const io = socketio(expressServer);
io.on("connection", (socket) => {
  io.to(socket.id).emit("message", "服务器欢迎你");
  socket.on("message", (msg) => {
    io.to(socket.id).emit("message", "服务器收到你的消息了," + msg);
  });
});

这里的io.to(socket.id).emit(),和io.emit()是有区别的。

  • 前者io.to(socket.id).emit(),是仅仅发送给当前的这个socket
  • 后者io.emit(),是无差别的发送给所有人(系统广播,村长也跑不了),类似于广播(村长广播,不发给村长)。

苏南大叔:Socket.io双向通信教程,基本使用方式范例 - server-code
Socket.io双向通信教程,基本使用方式范例(图4-3)

客户端

放了一个test.htmlpublic目录下面,代码如下:

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  socket.emit('message', "Hello, Server!");
  socket.on('message', message => {
    console.log(message);
  });
</script>

苏南大叔:Socket.io双向通信教程,基本使用方式范例 - client-code
Socket.io双向通信教程,基本使用方式范例(图4-4)

这代码,表面上看起来挺简单。但是,仔细瞅的话,就充满了各种各样的疑问。

  • 服务器上并没有/socket.io/socket.io.js这个文件,它的出现是匪夷所思的。当然,你可以选择网络地址加载它,或者换个路径名称加载它。
  • 它没写服务器地址,类似ws:://localhost之类的字样,是没有的。所以,这里比如是有个默认的值。
  • 它虽然有on('message'),但是使用.emit()代替了.send()。或者说.emit('message',msg)==.send(msg)

结语

本文仅仅涉及socket.io的最基本的收发消息的代码,更多其它技术细节待后续文章讨论。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   nodejs    socket