WebSocket入門

WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.
WebSocketは、クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.
現在、多くのサイトがプッシュテクノロジーを実現するために使用しているテクノロジーはAjaxポーリングです.ポーリングは、1秒ごとなどの特定の時間間隔で、ブラウザによってサーバに対してHTTP要求を発行し、サーバによって最新のデータをクライアントのブラウザに返す.このような従来のモードは、ブラウザがサーバに絶えず要求する必要があるという明らかな欠点をもたらしているが、HTTP要求には長いヘッダが含まれている可能性があり、その中で本当に有効なデータはほんの一部であり、多くの帯域幅などのリソースを浪費することは明らかである.
HTML 5で定義されたWebSocketプロトコルは、サーバリソースと帯域幅をより効率的に節約し、よりリアルタイムで通信することができます.
ブラウザはJavaScriptを介してWebSocket接続の確立をサーバに要求し,接続が確立されるとクライアント側とサーバ側はTCP接続により直接データを交換することができる.
Web Socket接続を取得するとsend()メソッドでサーバにデータを送信し、onmessageイベントでサーバから返されたデータを受信できます.
DEMOは以下の通り

// client side file

let socket = new WebSocket('ws://localhost:9999');

//            
socket.onopen = function () {
  console.log('       ');
  
  //           
  socket.send('             ');
}

//             
socket.onmessage = function (res) {
  console.log('          ', res);
}

// server side file
/* npm i ws -S */
/*  ws      websocket   ,   9999    */
let WebSocketServer = require('ws').Server; 
let wsServer = new WebSocketServer({port: 9999});

wsServer.on('connection', socket=>{
    console.log('       ');
    socket.on('message', msg=>{
        console.log('           '+msg);
        socket.send('               ');
    })
})

スマートカスタマーサービスチャットの簡単なシミュレーション

let socket = new WebSocket("ws://localhost:9999");
export default {
  data() {
    return {
      dialogs: [],
      sendCont: "",
      isConnect: false
    };
  },
  mounted() {
    socket.onopen = () => {
      this.isConnect = true;
    };
  },
  methods: {
    send() {
      if (this.isConnect) {
        console.log("       ");
        //           
        socket.send(this.sendCont);
        this.dialogs.push({ sendContent: this.sendCont, self: true });
        //             
        socket.onmessage = res => {
          setTimeout(() => {
            this.dialogs.push({ acceptContent: res.data });
          }, Math.random() * 2000);
        };
      }
    }
  }
};

const contents = ['  ', 'hi', 'hello', 'nice to meet you', 'how are you', 'how do you do']

let WebSocketServer = require('ws').Server; 
let wsServer = new WebSocketServer({port: 9999});

wsServer.on('connection', socket=>{
    console.log('       ');
    socket.on('message', msg=>{
        console.log('           '+msg);
        socket.send(contents[parseInt(Math.random()*contents.length)]);
    })
})