基于node使用websocket,进行数据推送。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

如果对websocket完全没有了解的可以看下菜鸟教程: https://www.runoob.com/html/html5-websocket.html

建立一个小demo来演示一下吧,

1.新建一个html文件:

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>websoket</title>
    <style>
        
    </style>
</head>

<body>
    
    <script>
        let ws = new WebSocket('ws://localhost:8888');
        // onopen是客户端与服务端建立连接后触发
        ws.onopen = function () {
            ws.send('你好啊');
        };
        // onmessage是当服务端给客户端发来消息的时候触发,接收数据
        ws.onmessage = function (res) {
            console.log(res);   
            // 打印的是MessageEvent对象
            // 真正的消息数据是 res.data
        };

    </script>
</body>

</html>    

2.使用node.js的express来简单搭个后台服务,新建一个js文件,如sever.js

  1). 安装ws  $ npm i ws -S

  2). 安装express  $npm  i express -S

const express = require('express');
const app = express();
// 设置静态文件夹
app.use(express.static(__dirname));

app.listen(3000); // 可以再浏览器上打开localhost:3000
//=============================================
// 开始创建一个websocket服务
const Server = require('ws').Server;

const ws = new Server({ port: 8888 });

// 监听服务端和客户端的连接情况
ws.on('connection', function(socket) {
    // 监听客户端发来的消息
    socket.on('message', function(msg) {
        console.log(msg);   // 这个就是客户端发来的消息
    });
});

打开浏览器就可以接受到数据了,后台再将你要的数据返回给你。

 

posted @ 2019-07-29 15:39  迷茫_D  阅读(1468)  评论(0编辑  收藏  举报