私はいくつかの解決策をグーグルで検索し、それらを実装しようとしましたが、それらのいくつかは機能せず、いくつかは私にとって複雑でした. 私はいくつかの解決策を実装しようとしましたが、すべて失敗につながりました。
私はここでは初心者で、可能な限り簡単な例で paper.js を使用して socket.io を実装する方法を学びたいと考えています。複雑なことは私を混乱させるだけです。ここにサンプルコードを書きます。
クライアント側：
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script type="text/javascript" src="paper.js"></script>
</head>
<body>
<!-- Define inlined JavaScript -->
<script type="text/paperscript" canvas="Canv">
var socket = io.connect('http://localhost:3000');
var scope = new paper.PaperScope();
scope.setup(Canv);
var path;
function onMouseDown(event) {
path = new Path();
path.strokeColor = 'black';
path.add(event.point);
}
onMouseDrag = function(event) {
path.add(event.point);
}
</script>
<canvas id="Canv" width="900" height="500"
style="position:absolute;top:10%;left:13%;border:1px solid;">
</canvas>
</body>
</html>
そしてサーバー側：
var io = require('socket.io'),
connect = require('connect');
var app = connect().use(connect.static('public')).listen(3000);
var socket = io.listen(app);
描画座標を送信するように改善してください...多くのチュートリアルを見ましたが、取得できませんでした。