h5中websocket

Posted 2020-08-20 Jason齐齐

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