【发布时间】:2021-04-13 03:32:29
【问题描述】:
我之前在移动商店(Google 和 Apple)中构建并发布了非常简单的 AjAX/PHP 混合应用程序。现在我正在用socketio学习nodejs。我正在使用 socketio 进行bidirectional 通信(服务器到客户端和客户端到服务器)。我可以在指向 localhost 的开发机器上很好地使用它。
问题是:一旦应用部署在移动商店中,服务器应该如何与客户端通信?
在开发机器上很容易做到,因为它是本地的。在开发中,服务器和应用程序都在本地主机上。服务器在 3000 端口,客户端应用在 8000 端口运行。
无法“指向”商店中发布的应用。
这是我的简单应用,在所有设备和浏览器上进行本地测试时效果很好。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/app.css">
<title>Myapp</title>
</head>
<body id="app" onload="onLoad()"></body>
</html>
<!--SCRIPTS-->
<script src="cordova.js"></script>
//point to localhost server
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="js/app.js"></script>
app.js
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
//testing socket server
serverTest();
}
//testing socketio server
//see socket.js
//
function serverTest() {
var socket = io.connect('http://localhost:3000');
socket.on('connect', function() {
socket.on('text', function(text) {
//display data on page
document.getElementById('app').innerHTML = text;
});
})
}
socket.js
const path = require('path');
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server, {
cors: {
origin: "http://localhost:8000",
methods: ["GET", "POST"],
allowedHeaders: ["my-custom-header"],
credentials: true
}
});
/**
*
* use the following code to serve images, CSS files, and JavaScript files in a directory
* https://expressjs.com/en/starter/static-files.html
*
*/
app.use(express.static('js'));
app.use(express.static('css'));
//get
app.get('/', (req, res,next) => {
//...
});
io.on('connection', (socket) => {
//console
console.log('user connected');
//emitting event
socket.emit('text', '<p class="serverTest">server and client are communicating </p>');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
【问题讨论】: