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

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

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

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

WebSocket

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

Q&A

解決済

1回答

1996閲覧

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

MikMik

総合スコア46

Node.js

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

WebSocket

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

0グッド

0クリップ

投稿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

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

chat.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>WebSocket Chat</title> 7 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 8 <meta name="description" content=""> 9 <meta name="author" content=""> 10 <!-- Le styles --> 11 <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> 12 <style> 13 body { padding-top: 60px; /* 60px to make the container go all the way 14 to the bottom of the topbar */ } 15 </style> 16 <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> 17 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 18 <!--[if lt IE 9]> 19 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> 20 </script> 21 <![endif]--> 22 <!-- Le fav and touch icons --> 23 <link rel="shortcut icon" href="assets/ico/favicon.ico"> 24 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> 25 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> 26 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> 27 <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> 28 <style type="text/css"> 29 .container { 30 max-width: 768px; 31 } 32 #chat-area { 33 margin-bottom: 15px; 34 } 35 .meta { 36 color: #999999; 37 font-size: 0.9em; 38 } 39 .chat-time { 40 margin-left: 15px; 41 } 42 </style> 43 </head> 44 45 <body> 46 <div class="navbar navbar-fixed-top navbar-inverse"> 47 <div class="navbar-inner"> 48 <div class="container"> 49 <a class="brand" href="#">WebSocket Chat</a> 50 <ul class="nav"> 51 <li><a href="#">Home</a></li> 52 <li><a href="#">About</a></li> 53 <li><a href="#">Contact</a> 54 </li> 55 </ul> 56 </div> 57 </div> 58 </div> 59 60 61 <div class="container"> 62 <h1>WebSocket Chat</h1> 63 <div id="chat-area"> 64 <div class="input-prepend"> 65 <span class="add-on" id="user-name"><i class="icon-user"></i></span> 66 <input type="text" id="textbox" placeholder="今なにしてる?"> 67 </div> 68 </div> 69 <ul id="chat-history" class="unstyled row-fluid"></ul> 70 </div> 71 72 73 <script src="http://code.jquery.com/jquery-latest.js"></script> 74 <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 75 <script src="./chat_client.js"></script> 76 </body> 77 78</html>

chat_client.js

js

1// WebSocketサーバに接続 2var ws = new WebSocket('ws://123.456.789.012:5001/'); 3 4// エラー処理 5ws.onerror = function(e){ 6 $('#chat-area').empty() 7 .addClass('alert alert-error') 8 .append('<button type="button" class="close" data-dismiss="alert">×</button>', 9 $('<i/>').addClass('icon-warning-sign'), 10 'サーバに接続できませんでした。' 11 ); 12} 13 14// ユーザ名をランダムに生成 15var userName = 'ゲスト' + Math.floor(Math.random() * 100); 16// チャットボックスの前にユーザ名を表示 17$('#user-name').append(userName); 18 19// WebSocketサーバ接続イベント 20ws.onopen = function() { 21 $('#textbox').focus(); 22 // 入室情報を文字列に変換して送信 23 ws.send(JSON.stringify({ 24 type: 'join', 25 user: userName 26 })); 27}; 28 29// メッセージ受信イベントを処理 30ws.onmessage = function(event) { 31 // 受信したメッセージを復元 32 var data = JSON.parse(event.data); 33 var item = $('<li/>').append( 34 $('<div/>').append( 35 $('<i/>').addClass('icon-user'), 36 $('<small/>').addClass('meta chat-time').append(data.time)) 37 ); 38 39 // pushされたメッセージを解釈し、要素を生成する 40 if (data.type === 'join') { 41 item.addClass('alert alert-info') 42 .prepend('<button type="button" class="close" data-dismiss="alert">×</button>') 43 .children('div').children('i').after(data.user + 'が入室しました'); 44 } else if (data.type === 'chat') { 45 item.addClass('well well-small') 46 .append($('<div/>').text(data.text)) 47 .children('div').children('i').after(data.user); 48 } else if (data.type === 'defect') { 49 item.addClass('alert') 50 .prepend('<button type="button" class="close" data-dismiss="alert">×</button>') 51 .children('div').children('i').after(data.user + 'が退室しました'); 52 } else { 53 item.addClass('alert alert-error') 54 .children('div').children('i').removeClass('icon-user').addClass('icon-warning-sign') 55 .after('不正なメッセージを受信しました'); 56 } 57 $('#chat-history').prepend(item).hide().fadeIn(500); 58}; 59 60 61// 発言イベント 62textbox.onkeydown = function(event) { 63 // エンターキーを押したとき 64 if (event.keyCode === 13 && textbox.value.length > 0) { 65 ws.send(JSON.stringify({ 66 type: 'chat', 67 user: userName, 68 text: textbox.value 69 })); 70 textbox.value = ''; 71 } 72}; 73 74// ブラウザ終了イベント 75window.onbeforeunload = function () { 76 ws.send(JSON.stringify({ 77 type: 'defect', 78 user: userName, 79 })); 80};

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

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

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

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

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

guest

回答1

0

ベストアンサー

前回はnvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作るところまで終わりました。

参考にされたという記事の冒頭で上記のような一文がありますが、websocket.ioモジュールのインストールは済んでいるのでしょうか?

エラーの内容からして、websocket.ioがインストールされていないことが原因である可能性が高いと思います。(その他の可能性は質問文に掲載されている情報からは判断出来ません)

ちなみに、エラー文はそのまま質問文に貼り付けたほうが、より多くの情報を閲覧者に提供出来ると思います。

投稿2018/04/05 04:04

HayatoKamono

総合スコア2415

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問