Socket.io 事件触发一次无限循环
Socket.io event looping indefinitely when triggered once
所以我正在尝试使用 NodeJS 和 socket.io 制作一个简单的同步视频播放器,但是当我在搜索事件上触发视频时,它会重复并循环直到连接被移除。
我在服务器端和客户端使用相同版本的 socket.io。
我的客户:
<video id="avideo" src="" onseeked="onSeeked()" controls></video>
<script>
var socket = io({transports: ['websocket'], upgrade: false});
function onSeeked() {
var timestamp = document.getElementById("avideo").currentTime;
socket.emit("seekdone", timestamp);
console.log('client seeked')
}
socket.on('seekdone', function(timestamp) {
console.log('server seeked')
document.getElementById("avideo").currentTime = timestamp;
});
</script>
服务器端:
var io = socket(listener);
io.on("connection", function(socket) {
socket.on("seekdone", function(timestamp) {
socket.broadcast.emit("seekdone", timestamp);
});
});
我在视频上搜索后在控制台中得到的输出:
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
...
我也试过让 eventListener seeked 但结果是一样的。
我 认为 在这里发生的是我搜索视频,服务器向我发送搜索事件到指定时间,因此它再次触发自身。
当我在服务器上将它更改为 socket.broadcast.emit
时,结果也是一样的,但是当一个用户离开时,循环停止。
在你的客户端js中,如果你改为:
var socket = io({transports: ['websocket'], upgrade: false});
var lastSeekFromServer = null; // NEW CODE
function onSeeked() {
var timestamp = document.getElementById("avideo").currentTime;
if (timestamp !== lastSeekFromServer) { // NEW CODE
socket.emit("seekdone", timestamp);
} // NEW CODE
console.log('client seeked')
}
socket.on('seekdone', function(timestamp) {
console.log('server seeked')
lastSeekFromServer = timestamp; // NEW CODE
document.getElementById("avideo").currentTime = timestamp;
});
这基本上是为了确保我们不会告诉 socket.io
它触发的 seeked
事件。可能有更优雅的方法来获得相同的效果,但这应该能让您朝着正确的方向思考。
所以我正在尝试使用 NodeJS 和 socket.io 制作一个简单的同步视频播放器,但是当我在搜索事件上触发视频时,它会重复并循环直到连接被移除。 我在服务器端和客户端使用相同版本的 socket.io。
我的客户:
<video id="avideo" src="" onseeked="onSeeked()" controls></video>
<script>
var socket = io({transports: ['websocket'], upgrade: false});
function onSeeked() {
var timestamp = document.getElementById("avideo").currentTime;
socket.emit("seekdone", timestamp);
console.log('client seeked')
}
socket.on('seekdone', function(timestamp) {
console.log('server seeked')
document.getElementById("avideo").currentTime = timestamp;
});
</script>
服务器端:
var io = socket(listener);
io.on("connection", function(socket) {
socket.on("seekdone", function(timestamp) {
socket.broadcast.emit("seekdone", timestamp);
});
});
我在视频上搜索后在控制台中得到的输出:
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
server seeked
client seeked
...
我也试过让 eventListener seeked 但结果是一样的。
我 认为 在这里发生的是我搜索视频,服务器向我发送搜索事件到指定时间,因此它再次触发自身。
当我在服务器上将它更改为 socket.broadcast.emit
时,结果也是一样的,但是当一个用户离开时,循环停止。
在你的客户端js中,如果你改为:
var socket = io({transports: ['websocket'], upgrade: false});
var lastSeekFromServer = null; // NEW CODE
function onSeeked() {
var timestamp = document.getElementById("avideo").currentTime;
if (timestamp !== lastSeekFromServer) { // NEW CODE
socket.emit("seekdone", timestamp);
} // NEW CODE
console.log('client seeked')
}
socket.on('seekdone', function(timestamp) {
console.log('server seeked')
lastSeekFromServer = timestamp; // NEW CODE
document.getElementById("avideo").currentTime = timestamp;
});
这基本上是为了确保我们不会告诉 socket.io
它触发的 seeked
事件。可能有更优雅的方法来获得相同的效果,但这应该能让您朝着正确的方向思考。