向前台传送json文件信息的webscoket简单示例

223 阅读1分钟

首发:鲸讯微信小程序
作者:鲸林向海工作室

1、websocket简介

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

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

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

2、html代码

<!DOCTYPE HTML>  
<html>
<head>
    <meta charset="utf-8" />
    <title>websocket示例</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div id="connected">

    </div>
    
    <script type="text/javascript">
       
        var onOpen = function() {
                console.log("Socket opened.");
                socket.send("Hi, Server!");
            },
            onClose = function() {
                console.log("Socket closed.");
            },

            onMessage = function(data) {
                console.log("We get signal:");
                //转换成json数据
                console.log(JSON.parse(data.data));
                //数据测试
                var a =document.getElementById('connected');
                a.append(data.data)
            },

            onError = function() {
                console.log("We got an error.");
            },

            //通讯地址
            socket = new WebSocket("ws://127.0.0.1:8080/");

        socket.onopen = onOpen;
        socket.onclose = onClose;
        socket.onerror = onError;
        socket.onmessage = onMessage;
    </script>
</body>
</html>

3、JS代码

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });


wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  //引入json数据
  const data = require('./data/server.json');
  //转换数据类型
  var demo =JSON.stringify(data);
  console.log(typeof demo);
  //发送数据
  ws.send(demo);
});

4、完整代码

github:github.com/piaoxiaobo/…

5、联系方式