Socket.IO使用方法

前言

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>

2.3、测试

Socket.IO使用方法_第1张图片

你可能感兴趣的:(中间件,#,WebSocket,websocket,javascript,前端)