zoukankan      html  css  js  c++  java
  • node系列--【socket.io框架】

    一、websocket协议

    WebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的。

    二、socket.io框架

    ​ node.js诞生起就是支持websocket协议。但是如果用node原生语法与websocket原生函数等实现聊天软件应用比较困难。socket.io是一个大神封装好的websocket应用框架。

    ​ 安装: npm i socket.io

    ​ 服务端代码:

    let http = require("http");
    let fs = require("fs");
    
    let sever = http.createServer((req,res)=>{
      fs.readFile("./index.html",(err,data)=>{
        res.end( data.toString() )
      })
    })
    
    sever.listen(3000,()=>{
      console.log("http服务已启动");
    })
    
    // 启动socket服务器
    let io= require("socket.io")(sever);
    io.on("connection",(socket)=>{
      console.log("有一个客户端连接了");
      // 服务器端定义事件
      socket.on("tiwen",(msg)=>{
       // 触发客户端自定义事件
        socket.emit("huida", msg+"你好吗")
      })
    })
    

    客户端代码:

    <body>
      <h1>socket.io</h1>
      <input type="text" id="msg"><br>
      <button id="btn">聊天</button>
    </body>
    </html>
    <!-- 引入秘密js -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      let socket = io();
      
      // 客户端自定义事件
      socket.on("huida",(data)=>{
        console.log( data );
        // 接收服务端返回的消息,将其渲染到网页上。
      })
    
      // 客户端主动触发服务端事件
      let  btn = document.getElementById("btn");
      btn.onclick = function(){
        let msg = document.getElementById("msg").value;
        socket.emit("tiwen", msg)
      }
    </script>
    
  • 相关阅读:
    并发编程(十)—— Java 并发队列 BlockingQueue 实现之 SynchronousQueue源码分析
    并发编程(九)—— Java 并发队列 BlockingQueue 实现之 LinkedBlockingQueue 源码分析
    Java工程师成神之路
    并发编程(八)—— Java 并发队列 BlockingQueue 实现之 ArrayBlockingQueue 源码分析
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/14706112.html
Copyright © 2011-2022 走看看