要实现两个聊天页面之间的消息传递和接收,可以使用WebSockets技术来实现。以下是一个简单的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>聊天页面1</title>
</head>
<body>
<h1>聊天页面1</h1>
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>
<ul id="messages"></ul>
<script>
var socket = new WebSocket("ws://localhost:8080");
socket.onmessage = function(event) {
var message = event.data;
var li = document.createElement("li");
li.textContent = message;
document.getElementById("messages").appendChild(li);
};
function sendMessage() {
var message = document.getElementById("message").value;
socket.send(message);
document.getElementById("message").value = "";
}
</script>
</body>
</html>
```
JavaScript代码:
```javascript
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer(function(request, response) {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log((new Date()) + ' Server is listening on port 8080');
});
wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: false
});
function originIsAllowed(origin) {
return true;
}
wsServer.on('request', function(request) {
if (!originIsAllowed(request.origin)) {
request.reject();
console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
return;
}
var connection = request.accept('echo-protocol', request.origin);
console.log((new Date()) + ' Connection accepted.');
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
connection.sendUTF(message.utf8Data);
}
else if (message.type === 'binary') {
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
connection.sendBytes(message.binaryData);
}
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
});
});
```
要运行这个示例代码,您需要安装Node.js和websocket模块。然后在终端中进入JavaScript代码所在的目录,运行以下命令:
```
node server.js
```
然后在浏览器中打开两个聊天页面,分别输入消息并发送,就可以在两个页面之间进行消息传递和接收了。