jsonファイル情報をフロントに転送するwebscoketの例

作者のブログ:漂小泊のブログ作者の主な駅:小泊随記原文の住所:文章の住所
愛は大声で言う.
Websocketの概要
WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.
WebSocket APIでは、ブラウザとサーバが握手をするだけで、ブラウザとサーバの間に高速チャネルが形成されます.両者の間で直接データを互いに転送することができる.
ブラウザはJavaScriptを介してWebSocket接続の確立をサーバに要求し,接続が確立されるとクライアント側とサーバ側はTCP接続により直接データを交換することができる.
Web Socket接続を取得するとsend()メソッドでサーバにデータを送信し、onmessageイベントでサーバから返されたデータを受信できます.
htmlコード

  


    
    
    


    


    
    
    
       
        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;
    

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

完全なコード
転送ゲート:https://github.com/piaoxiaobo/websocket_demostarを覚えてるか?
小泊に連絡する
email:[email protected]