monaca nodejs socket.io でWebSocketを利用してチャットアプリができるか調査

– by

 

以下サイトを参考にテストしてみました。
https://blog.potproject.net/?p=337

monacaから使用するのでサーバ側は、さくらVPSに配置しました。
node.jsとnpmはインストール済みという前提ではじめました。

サーバ側を実装
・テスト用ののディレクトを作成

mkdir /var/www/socket

 

・package.jsonを作成（npm initはなにも入力しなかった。）

cd /var/www/socket
npm init

 

・npmで「socket.io」と「socket.io-client」をインストール

npm install socket.io socket.io-client

 

・かんたんなソケット通信ができる実装を

/var/www/socket/app.js

var http = require('http');
var socket  = require('socket.io');
var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type':'text/html'});
    res.end('server connected');
});
var port = 3000;
var io = socket.listen(server);
server.listen(port);

io.sockets.on('connection', function (socket) {
    socket.emit('text', 'socket.io OK!!');
});

 

クライアント側の実装　monaca（Onsen UIとAngularJSを利用）

index.html

<!DOCTYPE HTML>
<html lang="ja" ng-app="chat-app">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="http://【さくらVPSのドメインまたはIP】:3000/socket.io/socket.io.js"></script>
    <script src="js/app.js"></script><!--このjsへwebsocketの処理を実装-->
	
</head>
<body ng-controller="mainCtrl">
</body>
</html>

 

 

app.js

var module = angular.module('chat-app', ['onsen']);
document.addEventListener ("deviceready", onDeviceReady, false);
function onDeviceReady () {

}
// コントローラー
module.controller('mainCtrl', function($scope, $http, $sce, $q, $anchorScroll, $location) {
	// document.readyの実装
    angular.element(document).ready(function () {
		// ソケット通信テスト
		$scope.soketTest();
    });
    // ソケット通信テスト
    $scope.soketTest = function() {
        var url = "ws://【さくらVPSのドメインまたはIP】:3000/"; //websocketサーバのURL。

	//接続
        var socket = io.connect(url);
        socket.on('connect', function() {
            console.log('connect!');
        });
	// サーバーからのテキストを受けてコンソールに表示
        socket.on('text',function(text){
            console.log(text); // 'socket.io OK!!'がコンソールに表示される
        });
        
    };
});