Socket.IO使用方法

前言Socket.IO是一个库，基于 Node.js 的实时应用程序框架。可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它适用于每个平台、浏览器或设备，同样注重可靠性和速度。它包括：Node.js 服务器浏览器的Javascript客户端库（也可以从Node.js运行）WebSocket 的产生源于 Web 开发中日益增长的实时通信需求，对比基于 http 的轮询方式，它大大节省了网络带

韭菜盖饭

5555人浏览 · 2022-01-05 18:30:16

韭菜盖饭 · 2022-01-05 18:30:16 发布

前言

Socket.IO是一个库，基于 Node.js 的实时应用程序框架。可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它适用于每个平台、浏览器或设备，同样注重可靠性和速度。它包括：

Node.js 服务器
浏览器的Javascript客户端库（也可以从Node.js运行）

WebSocket 的产生源于 Web 开发中日益增长的实时通信需求，对比基于 http 的轮询方式，它大大节省了网络带宽，同时也降低了服务器的性能消耗。

WebSocket 协议在2008年诞生，2011年成为国际标准。虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，就诞生SocketIO。

SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。
SocketIO使用手册https://socket.io/docs/v4/handling-cors/

一、安装Socket.IO

npm init -y
npm install socket.io

二、使用场景

两个客户端互相通信

2.1、模拟服务端

const { createServer } = require("http");
const { Server } = require("socket.io");

const httpServer = createServer();
const io = new Server(httpServer, {  
    cors: {                 //解决跨域问题
        origin: "*",
        methods: ["GET", "POST"]
  } 
});

io.on("connection", (socket) => {
    // 自定义接收消息事件
  socket.on('sendMsg',(data) => {
      console.log(data)
    //   定义发送消息事件
    // io表示广播出去，发送给全部的连接
      io.emit('pushMsg',"服务端返回的消息："+data)
  })
});

httpServer.listen(3000,function(){
    console.log('http://127.0.0.1:3000')
});

2.1、模拟客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- socketio提供的客户端 -->
    <script 
        src="https://cdn.socket.io/4.4.0/socket.io.min.js" 
        integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj"
        crossorigin="anonymous">
    </script>
</head>
<body>
    <input type="text" id="text">
    <input type="button" value="发送" onclick="send()">

    <script>
        // 直接建立连接
      var socket = io.connect('http://127.0.0.1:3000')
      function send(){
          var text = document.getElementById('text').value
        //   发送消息
          socket.emit('sendMsg',text)
      }

    //   接收服务端的消息
    socket.on('pushMsg',(data) => {
        console.log(data)
    })


    </script>
</body>
</html>