質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

Socket.ioの、socket.get/socket.setに変わる記述方法(ドットインストール)

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 224

moritat-222

score 11

前提・実現したいこと

ドットインストールのSocket.ioコース(2014年に更新終了・アーカイブ済)で、Socket.ioをの勉強をしています。
「#08 ソケットごとにデータを保存する」というレッスンで、各クライアントが通信を行う際に、自分のユーザー名を設定できるように実装したいです。

講座は2014年に更新終了したものなので、見本に使われているコードのうち、socket.get, socket.setが、今ではもう使えなくなってしまっているようです。

socket.get, socket.setを使わずに実装する方法を教えていただきたいです。
よろしくお願いします。

見本のコード

・app.js (サーバー)

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');
app.listen(1337);
io.set('log level', 1);
function handler(req, res) {
    fs.readFile(__dirname + '/index.html', function(err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Error');
        }
        res.writeHead(200);
        res.write(data);
        res.end();
    })
}
io.sockets.on('connection', function(socket) {
    socket.on('emit_from_client', function(data) {
        socket.set('client_name', data.username);  //現在使用できないメソッド
        socket.get('client_name', function(err, username) { //現在使用できないメソッド
            io.sockets.emit('emit_from_server', '[' + username + '] : ' + data.msg);
        });
    });
});

・index.html (クライアント)

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Socket.IOの練習</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="name"> <input type="text" id="msg"> <input type="submit" value="Send!">
    </form>
    <ul id="logs"></ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        $(function() {
            var socket = io.connect();
            // emit: イベントを発信している
            // on: イベントを待ち受けている
            $('#myForm').submit(function(e) {
                e.preventDefault();
                socket.json.emit('emit_from_client', {
                    msg: $('#msg').val(),
                    username: $('#name').val()
                });
                $('#msg').val('').focus();
            });
            socket.on('emit_from_server', function(data) {
                $('#logs').append($('<li>').text(data));
            });
        });
    </script>
</body>
</html>

試したこと

stackoverflowで類似の質問を見つけたため、こちらを参考に実装使用と試みました。

ユーザーのusernameプロパティを格納できる配列をサーバー側に作成し、
socket.msgで取得した値を配列に格納。'emit_from_server'でクライアント側に送るのかなと思うのですが、
うまく実装できませんでした。

現在のコード

実装に際しては、公式のgitgubに書かれていたサンプルコードを参照しています。(正しく参照できていない気がします)

・app.js

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');

app.listen(1337, () => {
  console.log('server is up on port 1337')
});

function handler(req, res){
  fs.readFile(__dirname + '/index.html', function(err, data){
    if(err){
      res.writeHead(500);
      return res.end('Error');
    }
    res.writeHead(200);
    res.write(data);
    res.end();
  })
}


io.sockets.on('connection', function(socket){

  var username = {};
  var numUsers = 0;

    socket.on('emit_from_client', function(data){
      socket.username = username;
      // add the client's username to the global list
      username[numUsers] = username;
      ++numUsers;
      addedUser = true;

      console.log(username + data.msg)

      io.sockets.emit('emit_from_server', {
        username: socket.username,
        msg: data.msg
      })
    });
})

・index.html (クライアント)
は同上

現在のエラー

イメージ説明

よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る