webSocket -- 03 socket.io

最新推荐文章于 2024-07-05 15:43:42 发布

大毛z

最新推荐文章于 2024-07-05 15:43:42 发布

阅读量78

点赞数

分类专栏：前端文章标签： websocket javascript 网络

本文链接：https://blog.csdn.net/qq_43619461/article/details/122305788

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

socket.io

为什么使用socket.io

简单
高效：连接池的管理比自己写的要高效（通常）

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="node_modules/socket.io/client-dist/socket.io.js"></script>

</head>
<body>
    <div id="msg"></div>
    <input type="text" id="text">
    <input type="submit" 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)
      }
    </script>

</body>
</html>

服务端

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)
   })
});

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