WebSocket的使用(一)

WebSocket 是一种网络通信协议

一:以下时前端页面

//   WebSocket 是客户端与服务端的一种通信协议,区别与ajax通信;ajax通信:(使用定时器)是由客户端向服务端发送请求,服务端再做出响应的数据返回。
            //   WebSocket 服务端主动向客户端发送数据,使用场景需要实时数据交互,例如位置的应用、在线教育、智能家居等需要高实时的场景。

`
//前端
// ①连接状态时的事件回调
var onOpen = function(event){

    console.log(event);
    var msg = {
        type: "message12222",
        text: "something",
        id: "number",
        time: Date.now()
    };
    this.abj = event.type;
    `//send可以向后台发送字符串、Blob或ArrayBuffer,固传入对象时,利用JSON对其序列化`
    ws.send(JSON.stringify(msg));
};
`// ②关闭状态时的事件回调`
var onClose = function(event){
};
`  //③ 有后台返回值的事件回调`
var onMessage = function(data){
    `
    在这里,可以获取后台返回给前端的数据,在前端做出对应处理。
    `
    console.log(data);

};
` // ④错误状态时的事件回调`
var onError = function(event){
};
`//接口响应`
var ws = new WebSocket('ws://127.0.0.1:8080/');
`//响应的函数`
ws.onopen = onOpen;
ws.onclose = onClose;
ws.onerror = onError;
ws.onmessage = onMessage;

}
`
二:以下是用node.js搭建的后端页面
`

// //需要ws模块
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port:8080});

wss.on('connection',function(ws) {
    ws.on('message',function(message) {
    `//获取前端返回过来的值`
        console.log(message);
        var obj = JSON.parse(message);
        console.log(obj);
    });
    `//发送给到前面`
    ws.send('hello world');
})
console.log('running');

`
三:页面展示
这个 node app (app自定义的node文件)
微信图片_20200327155015.png

你可能感兴趣的:(WebSocket的使用(一))