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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1393閲覧

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

moritat-222

総合スコア19

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/03 14:53

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

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

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

##見本のコード

・app.js (サーバー)

javascript

1 2var app = require('http').createServer(handler), 3 io = require('socket.io').listen(app), 4 fs = require('fs'); 5app.listen(1337); 6io.set('log level', 1); 7function handler(req, res) { 8 fs.readFile(__dirname + '/index.html', function(err, data) { 9 if (err) { 10 res.writeHead(500); 11 return res.end('Error'); 12 } 13 res.writeHead(200); 14 res.write(data); 15 res.end(); 16 }) 17} 18io.sockets.on('connection', function(socket) { 19 socket.on('emit_from_client', function(data) { 20 socket.set('client_name', data.username); //現在使用できないメソッド 21 socket.get('client_name', function(err, username) { //現在使用できないメソッド 22 io.sockets.emit('emit_from_server', '[' + username + '] : ' + data.msg); 23 }); 24 }); 25}); 26

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

html

1 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Socket.IOの練習</title> 6</head> 7<body> 8 <form id="myForm"> 9 <input type="text" id="name"> <input type="text" id="msg"> <input type="submit" value="Send!"> 10 </form> 11 <ul id="logs"></ul> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 13 <script src="/socket.io/socket.io.js"></script> 14 <script> 15 $(function() { 16 var socket = io.connect(); 17 // emit: イベントを発信している 18 // on: イベントを待ち受けている 19 $('#myForm').submit(function(e) { 20 e.preventDefault(); 21 socket.json.emit('emit_from_client', { 22 msg: $('#msg').val(), 23 username: $('#name').val() 24 }); 25 $('#msg').val('').focus(); 26 }); 27 socket.on('emit_from_server', function(data) { 28 $('#logs').append($('<li>').text(data)); 29 }); 30 }); 31 </script> 32</body> 33</html> 34

##試したこと

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

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

##現在のコード

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

・app.js

javascript

1 2var app = require('http').createServer(handler), 3 io = require('socket.io').listen(app), 4 fs = require('fs'); 5 6app.listen(1337, () => { 7 console.log('server is up on port 1337') 8}); 9 10function handler(req, res){ 11 fs.readFile(__dirname + '/index.html', function(err, data){ 12 if(err){ 13 res.writeHead(500); 14 return res.end('Error'); 15 } 16 res.writeHead(200); 17 res.write(data); 18 res.end(); 19 }) 20} 21 22 23io.sockets.on('connection', function(socket){ 24 25 var username = {}; 26 var numUsers = 0; 27 28 socket.on('emit_from_client', function(data){ 29 socket.username = username; 30 // add the client's username to the global list 31 username[numUsers] = username; 32 ++numUsers; 33 addedUser = true; 34 35 console.log(username + data.msg) 36 37 io.sockets.emit('emit_from_server', { 38 username: socket.username, 39 msg: data.msg 40 }) 41 }); 42}) 43 44

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

##現在のエラー

イメージ説明

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問