【Node.js】5分で実行できるSocekt.ioのサンプル【初心者向けチュートリアル】

どーも、ぐるたか@guru_takaです。

Node.jsにて、Socket.ioを5分で実行できる初心者向けのサンプルを作りました。

スポンサードリンク

Socket.ioとは？
導入方法
- 簡単な解説
参考リンク

Socket.ioとは？

Socket.ioとは、ブラウザ・モバイルデバイスでリアルタイム通信するために開発されたnode.js用サーバー側ライブラリとブラウザ用JavaScriptライブラリです。

リアルタイムで行われるゲームやチャットなどに使えます。WebSocketで問題だった「到達が保証されない」こともカバーしてくれる優れものです。接続が切れたとき、クライアントに対して、再接続処理もやってくれます。

参考 socket.io が提供してくれているものは何かfrom scratch 参考サーバからクライアントに送信する技術 - WebSocketを中心にQiita

導入方法

まずは、インストールしましょう。

コマンドライン

$ npm install socket.io

ソースを先に紹介します。

server.js


//fsモジュール, 公式備え付け
const fs = require('fs')
const http = require('http')
// サーバーオブジェクト作成
const server = http.createServer()

//クライアントからリクエストあった時の処理
server.on('request', (req, res) => {
  const stream = fs.createReadStream('index.html')
  res.writeHead(200, { 'Content-Type': 'text/html' })
  stream.pipe(res)
})

//ポート番号、サーバー待受状態
server.listen(80)

//以下Socket.io部分
const io = require('socket.io').listen(server)

io.on('connection', socket => {
  // クライアントへデータ送信
  socket.emit('hello', { hello: 'world' })

  socket.on('event', data => {
    console.log(data)
  })
})

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Client</title>
    <link
      rel="stylesheet"
      href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"
    />
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div class="container">
      <form name="myform">
        <button type="button" id="btn">Date送信</button>
      </form>
    </div>
    <script>
      const socket = io.connect('http://localhost:80')

      //evenName"hello"監視
      socket.on('hello', data => {
        // サーバから受け取ったデータを出力する
        console.log(data)
      })

      document.addEventListener('DOMContentLoaded', function(e) {
        document.getElementById('btn').addEventListener('click', function(e) {
          socket.emit('event', { date: new Date() })
        })
      })
    </script>
  </body>
</html>

以下、コマンドラインで叩けば動きます！

コマンドライン