Witam.
Nie za bardzo rozumiem ajaxa, tego jak to się komunikuje itd. Próbuję zrobić prosty serwer w java oparty na ServerSocket, który ma obierać dane wysyłane metodą POST z aplikacji w js. Czyli w pliku app.js będzie to fragment w liniach od 20 do 25 data: { id: lookAtObjectId, x: _position.x, y: _position.y, z: _position.z, }, . Testowo coś tam próbuję wysłać. Następnie serwer będzie jako thread pool, żeby obsługiwać niezależnie kilka obiektów, ale zanim do tego dojdę muszę ogarnąć jak to ma zbierać dane o pozycji obiektu następnie odsyłać z powrotem do przeglądarki. Ale o ile do serwera coś dociera, co widać na obrazku niżej w terminalu, to z odebraniem z powrotem odpoowiedzi mam problem. Biblioteka Three.js jest aktualna pobrana z oficjalnej strony projektu. Według mnie wina gdzieś leży po stronie kodu js, ale może też to być kwestia nagłówków jakie odsyłam przez serwer w lini 27 out.println("test"); . Nie wiem za bardzo jak to poprawić.... Wygląda to jakoś tak:
W konsoli (F12) dostaję takie informacje zamiast odpowiedzi jako success:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ jquery-3.4.1.min.js:2:80627
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:59091/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:59091/?_=1579519775650. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:59091/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:59091/?_=1579519775651. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:59091/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
( itd ... )
index.html
<html>
<head>
<title>Test app</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="three.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var camera, scene, renderer;
//var mesh;
var id = 0;
var lookAtObjectId = 8;
var speed = 1;
var _position = {x:0, y:0, z:0};
var _move = {up:false, down:false, left:false, right:false};
// write to file test
$(window).keypress(function (e) {
var data = _position;
$.ajax({
url: 'http://localhost:59091',
type: 'POST',
async: false,
//dataType: 'json',
cache: false,
data: {
id: lookAtObjectId,
x: _position.x,
y: _position.y,
z: _position.z,
},
//data: $(window)._position,
success: function(result) {
console.log('the data was successfully sent to the server');
//return data;
}
});
$.ajax({
url: 'http://localhost:59091',
type: 'GET',
async: true,
crossDomain:true,
//dataType: 'json',
cache: false,
success: function(res) {
console.log(res);
//alert(res);
}
});
});
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var size = 1000, divisions = 100;
var gridHelper = new THREE.GridHelper(size, divisions);
gridHelper.rotation.x = -40;
scene.add( gridHelper );
scene.add( new createObject() );
scene.add( new createObject() );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'keydown', function(e) {
//console.log( e.keyCode );
// W - 87 move up
// S - 83 down
// A - 65 left
// D - 68 right
switch (e.keyCode) {
case 87:
//scene.getObjectById(lookAtObjectId).position.x += speed;
//break;
_move.up = true;
break;
case 83:
//scene.getObjectById(lookAtObjectId).position.x -= speed;
//break;
_move.down = true;
break;
case 65:
//scene.getObjectById(lookAtObjectId).position.z += speed;
//break;
_move.left = true;
break;
case 68:
//scene.getObjectById(lookAtObjectId).position.z -= speed;
//break;
_move.right = true;
break;
}
//console.log(document.body);
}, false );
window.addEventListener( 'keyup', function(e) {
switch (e.keyCode) {
case 87:
_move.up = false;
break;
case 83:
_move.down = false;
break;
case 65:
_move.left = false;
break;
case 68:
_move.right = false;
break;
}
}, false );
}
function createObject() {
var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
var material = new THREE.MeshBasicMaterial( { color: 'yellow' } );
material.wireframe = true;
var mesh = new THREE.Mesh( geometry, material );
mesh.id = (++id);
//console.log(mesh.id);
return mesh;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
//mesh.rotation.x += 0.005;
//mesh.rotation.y += 0.01;
//scene.getObjectById(8).position.x += (Math.sin(0.1));
scene.getObjectById(9).position.y += 0.1;
scene.getObjectById(9).rotation.z -= 0.01;
//console.log();
if (_move.up) {
_position.z -= speed;
}
if (_move.down) {
_position.z += speed;
}
if (_move.left) {
_position.x -= speed;
}
if (_move.right) {
_position.x += speed;
}
scene.getObjectById(lookAtObjectId).position.x = _position.x;
scene.getObjectById(lookAtObjectId).position.y = _position.y;
scene.getObjectById(lookAtObjectId).position.z = _position.z;
camera.lookAt(scene.getObjectById(lookAtObjectId).position);
//console.log(scene.getObjectById(8).position);
renderer.render( scene, camera);
}
Server.java
import java.io.IOException;
import java.io.PrintWriter;
import java.io.InputStreamReader;
import java.io.BufferedReader;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Date;
import java.util.Scanner;
/**
* A simple TCP server. When a client connects, it sends the client the current
* datetime, then closes the connection. This is arguably the simplest server
* you can write. Beware though that a client has to be completely served its
* date before the server will be able to handle another client.
*/
public class Server {
public static void main(final String[] args) throws IOException {
try (ServerSocket listener = new ServerSocket(59091)) {
System.out.println("The date server is running...");
BufferedReader in;
String inputLine;
int i = 0;
while (true) {
try (Socket socket = listener.accept()) {
final PrintWriter out = new PrintWriter(socket.getOutputStream(), true);
out.println("test");
in = new BufferedReader(
new InputStreamReader(socket.getInputStream()));
while ((inputLine = in.readLine()) != null) {
//if (i == 11)
System.out.println(i + " ===> " + inputLine);
i++;
}
i = 0;
//System.out.println(in.());
//out.println(new Date().toString());
}
}
}
}
}
