koa-socket ——核心思想 socket-io

最新推荐文章于 2024-05-27 09:47:16 发布

汐

最新推荐文章于 2024-05-27 09:47:16 发布

阅读量535

点赞数

本文链接：https://blog.csdn.net/qq_41104279/article/details/89819697

版权

### koa-socket

#### 核心思想socket-io

- 轮询ajax 缺点:不停询问服务器，浪费性能

- 服务器不关闭连接，一次响应，一直保持连接 缺点:只有服务器向客户端不断输出

- html5中出来了一个websocket 他是在原来http协议的基础上，去升级当前协议为websocket升级

- 将原本先有请求才有响应的机制，更改成了，服务端也可以主动发请求给客户端

- HTTP 一问一答， TCP协议，客户端与服务器建立连接以后，就可以自由的通信了

- 缺点:有兼容性问题（IE11）

- socket.io交互方式可能通过websocket/轮询ajax/服务器响应流(保持连接)

- 1. 服务器可主动发数据到客户端

\2. 客户端向客户端发数据通过服务器

<html>
<head>
    <meta charset="UTF-8">
    <title>01_长轮询</title>
</head>
<body>
    <input type="text" name="" id="time">
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript">
    //长轮询的方式，通过浏览器频繁发送请求来更新数据
        setInterval(function(){
            $.ajax({
                type:'get',
                url:'/getTimerByLongPull',
                // dataType:'json',
                success:function(time){
                    $('#time').val(time);
                }
            });
        },1000);
    </script>
</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title>02_长连接</title>
</head>
<body>
    <input type="text" name="" id="time">
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript">
    //长连接的方式，通过一次请求，服务器保持住连接，在连接超时前响应用户
         var xhr = new XMLHttpRequest();
         xhr.open('get','/getTimeByLongConn');
         xhr.onreadystatechange = function(res){
            //xhr.readyState===3服务器会给上一个头信息，但是数据没有发送完毕
          if(xhr.readyState === 3){
               console.log(xhr.responseText);
          }
        }
         xhr.send();
    //HTML5中的eventSource来单向推数据
    var es = new EventSource('/getTimeByLongConn');
    es.onmessage = function(e){
        document.querySelector('#time').value = e.data;
    }  
    //关闭该事件源
    //es.close();
    </script>
</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title>03_websocket</title>
</head>
<body>
    <input type="text" name="" id="time">
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript">
    //使用websocket的方式实现即时双向通信
    var ws = new WebSocket('ws://127.0.0.1:8080');//参数为请求地址和url
    ws.onopen = function(event){//设置连接打开的操作
        ws.send('我连接上了');
    };
    ws.onmessage = function(event){
        document.getElementById('time').value = event.data;
    };
    ws.onclose = function(event){
        //关闭的操作
    }
    // ws.close();
    </script>
</body>
</html>

app.js

'use strict';
const http = require('http');
const fs = require('fs');
//getTimeByLongConn
let server = http.createServer(function(req, res) {
    if (req.url === '/1') { //响应长轮询的页面
        fs.readFile('./01_long_pull.html', (err, data) => {
            res.writeHead(200, { 'content-type': 'text/html;charset=utf-8' });
            return res.end(data);
        });
    } else if (req.url === '/2') { //响应长轮询的页面
        fs.readFile('./02_long_conn.html', (err, data) => {
            res.writeHead(200, { 'content-type': 'text/html;charset=utf-8' });
            return res.end(data);
        });
    } else if (req.url === '/3') { //响应长轮询的页面
        fs.readFile('./03_ws.html', (err, data) => {
            res.writeHead(200, { 'content-type': 'text/html;charset=utf-8' });
            return res.end(data);
        });
    } else if (req.url === '/jquery.js') { //处理静态资源
        fs.readFile('./jquery.js', (err, data) => {
            res.writeHead(200, { 'content-type': 'application/x-javascript;charset=utf-8' });
            return res.end(data);
        });
    } else if (req.url === '/getTimerByLongPull') { //处理长轮询
        res.end(Date.now() + '');
    } else if (req.url === '/getTimeByLongConn') { //处理长连接不要end
        res.writeHead(200, { 'content-type': 'text/event-stream' }); //达到每次传输部分数据的效果
        setInterval(function() {
            // res.write(Date.now() + ''); 原生ajax使用方式
            // eventSouce 使用方式
            res.write('data:' + Date.now() + '\n\n')
        }, 1000);
    } else {
        return res.end('icon'); //处理图标
    }
});

server.listen(80, '127.0.0.1', function() {
    console.log('服务器启动了');
});


//启动websocket服务器
var WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function(ws) {
    //ws 就是一个websocket对象,里边可以发送和接受数据,
    ws.on('message', function(message) {
        console.log('received: ' + message);
    });

    setInterval(function() {
        ws.send(Date.now() + '');
    }, 1000);
});

汐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
koa-socket ——核心思想 socket-io

### koa-socket#### 核心思想socket-io- 轮询ajax 缺点:不停询问服务器，浪费性能- 服务器不关闭连接，一次响应，一直保持连接缺点:只有服务器向客户端不断输出- html5中出来了一个websocket 他是在原来http协议的基础上，去升级当前协议为websocket升级- 将原本先有请求才有响应的机制，更改成了，服务端也可以主动发请求给客户...
复制链接

扫一扫