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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

解決済

Node.jsとwebsocket.ioでのチャットアプリ作成

MikMik
MikMik

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

1回答

0評価

0クリップ

1520閲覧

投稿2018/04/05 03:57

node.js 9.10.1

http://mawatari.jp/archives/make-a-chat-application-in-node-js-and-websocket-io

node.js素人です。
このサイトを参考にチャットアプリを作成しようとしています。
しかしサーバーを起動したときにwebsocketのモジュールが見つからないというエラーが発生してしまいます。
このエラーの対処の仕方をググってみたのですが、いまいち対応の仕方が分かりません。何が原因になっているのでしょうか?ご教授お願いします

chat_server.js

js

var ws = require('websocket.io'); var server = ws.listen(5001, function () { console.log('running'); }); // クライアントからの接続イベントを処理 server.on('connection', function(socket) { // クライアントからのメッセージ受信イベントを処理 socket.on('message', function(data) { // 実行時間を追加 var data = JSON.parse(data); var d = new Date(); data.time = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); data = JSON.stringify(data); console.log('\033[96m' + data + '\033[39m'); // 受信したメッセージを全てのクライアントに送信する server.clients.forEach(function(client) { client.send(data); }); }); });

chat.html

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WebSocket Chat</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } </style> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <style type="text/css"> .container { max-width: 768px; } #chat-area { margin-bottom: 15px; } .meta { color: #999999; font-size: 0.9em; } .chat-time { margin-left: 15px; } </style> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">WebSocket Chat</a> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a> </li> </ul> </div> </div> </div> <div class="container"> <h1>WebSocket Chat</h1> <div id="chat-area"> <div class="input-prepend"> <span class="add-on" id="user-name"><i class="icon-user"></i></span> <input type="text" id="textbox" placeholder="今なにしてる?"> </div> </div> <ul id="chat-history" class="unstyled row-fluid"></ul> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> <script src="./chat_client.js"></script> </body> </html>

chat_client.js

js

// WebSocketサーバに接続 var ws = new WebSocket('ws://123.456.789.012:5001/'); // エラー処理 ws.onerror = function(e){ $('#chat-area').empty() .addClass('alert alert-error') .append('<button type="button" class="close" data-dismiss="alert">×</button>', $('<i/>').addClass('icon-warning-sign'), 'サーバに接続できませんでした。' ); } // ユーザ名をランダムに生成 var userName = 'ゲスト' + Math.floor(Math.random() * 100); // チャットボックスの前にユーザ名を表示 $('#user-name').append(userName); // WebSocketサーバ接続イベント ws.onopen = function() { $('#textbox').focus(); // 入室情報を文字列に変換して送信 ws.send(JSON.stringify({ type: 'join', user: userName })); }; // メッセージ受信イベントを処理 ws.onmessage = function(event) { // 受信したメッセージを復元 var data = JSON.parse(event.data); var item = $('<li/>').append( $('<div/>').append( $('<i/>').addClass('icon-user'), $('<small/>').addClass('meta chat-time').append(data.time)) ); // pushされたメッセージを解釈し、要素を生成する if (data.type === 'join') { item.addClass('alert alert-info') .prepend('<button type="button" class="close" data-dismiss="alert">×</button>') .children('div').children('i').after(data.user + 'が入室しました'); } else if (data.type === 'chat') { item.addClass('well well-small') .append($('<div/>').text(data.text)) .children('div').children('i').after(data.user); } else if (data.type === 'defect') { item.addClass('alert') .prepend('<button type="button" class="close" data-dismiss="alert">×</button>') .children('div').children('i').after(data.user + 'が退室しました'); } else { item.addClass('alert alert-error') .children('div').children('i').removeClass('icon-user').addClass('icon-warning-sign') .after('不正なメッセージを受信しました'); } $('#chat-history').prepend(item).hide().fadeIn(500); }; // 発言イベント textbox.onkeydown = function(event) { // エンターキーを押したとき if (event.keyCode === 13 && textbox.value.length > 0) { ws.send(JSON.stringify({ type: 'chat', user: userName, text: textbox.value })); textbox.value = ''; } }; // ブラウザ終了イベント window.onbeforeunload = function () { ws.send(JSON.stringify({ type: 'defect', user: userName, })); };

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。