zoukankan      html  css  js  c++  java
  • h5中websocket

    ajax的数据传输是单向的,客户端和服务端没有连接-----客户端建立连接发送请求----服务器端沿着建立的连接返回相应----断开连接

    websocket则是可以在客户端和服务器端进行双向的数据接收和发送

    打个比方:小明在客厅看电视,小明的媳妇在卫生间洗衣服,小明的爸爸在书房看报纸,小明的妈妈在厨房做饭;小明的爸爸饿了,问小明:饭做好了么?这时小明只能去询问妈妈:饭做好了么,小明的妈妈回复小明说没做好,小明转而回复爸爸:饭没做好。如果按照ajax的习惯现场状态就变成了这样:小明的爸爸没过一秒钟问小明一次饭做没做好,小明只能一遍一遍的询问妈妈饭做没做好,然后不厌其烦的转达给爸爸;在整个一个过程中小明充当了服务器的角色,客户端(小明的爸爸)发出请求,服务器(小明)接收数据然后从数据库中(小明的妈妈)获取信息,再转达给小明的爸爸,才能达到实时展示信息的过程。然而引入websocket后,现场情况转变成了:小明的爸爸问小明:饭做好了没,小明转告妈妈:饭好了告诉爸爸一生,然后小明的妈妈把饭做好了直接告诉小明的爸爸:饭做好;

    忽略上面我拙劣的例子,下面接着来看websocket

    运行环境:基于node 安装
    安装:npm install socket.io
    工作流程:
    服务器端 接收 connection 接收完了之后进行emit(发送)
    客户端 需要connect

    服务器端使用 nodejs语句编写:

            var http=require('http');
                        var fs=require('fs');
                        var io=require('socket.io');
                        var httpObj=http.createServer(function(req,res){
    
                        });
                        httpObj.listen(8080);
                        var ws=io.listen(httpObj);
                        //服务器端接收数据
                        ws.on('connection',function(socket){
                            setInterval(function(){
                                socket.emit('time',Date.now());
                            },1000);
                            socket.on('khd',function(name,content){
                                console.log(name,content);
                            });
                        });                            

    客户端语句编写:
    客户端处理:
    var ws=io.connect('ws://localhost:8081');
    客户端接收数据:
    ws.on('time',function(result){
    console.log(result);
    });
    客户端向服务器端发送数据:
    ws.emit('kind','','');
    服务器端接收:
    soket.on('kind',function(name,content){
    console.log(name,content);
    });

  • 相关阅读:
    Asp.net core 2.0.1 Razor 的使用学习笔记(三)
    Asp.net core 2.0.1 Razor 的使用学习笔记(二)
    Asp.net core 2.1 Razor 的使用学习笔记(一)
    免费ssl证书申请和在IIS上启用https的使用教程
    ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用(四)—用户注册
    花生日记,网赚兼职____宝妈邀您加入精英团队
    excel中如何将时间戳转换为日期格式
    laravel 5.5 oauth2.0 跨域问题解决方案
    在自己的linux服务器上面部署ShowDoc
    Linux 环境下安装 Nginx+php+mysql 开发环境
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/6087470.html
Copyright © 2011-2022 走看看