Javascript 如何创建显示所有连接用户光标位置的页面？Node.js、ws、express
我想创建一个简单的页面，显示所有连接用户的鼠标坐标 我甚至可以显示单个连接客户端的鼠标坐标。将鼠标坐标发送到服务器。将数据发送回。 我不知道从这里到哪里去。我正在考虑如何将来自服务器的每个响应保存为对象，然后显示该对象。我被卡住了，不知道如何解决这项任务 服务器端代码Javascript 如何创建显示所有连接用户光标位置的页面？Node.js、ws、express,javascript,node.js,express,ws,Javascript,Node.js,Express,Ws,我想创建一个简单的页面，显示所有连接用户的鼠标坐标 我甚至可以显示单个连接客户端的鼠标坐标。将鼠标坐标发送到服务器。将数据发送回。 我不知道从这里到哪里去。我正在考虑如何将来自服务器的每个响应保存为对象，然后显示该对象。我被卡住了，不知道如何解决这项任务 服务器端代码 var express = require('express') var WebSocket = require('ws') var app = express() app.listen(3000, function() {
var express = require('express')
var WebSocket = require('ws')
var app = express()
app.listen(3000, function() {
console.log("Server started on port 3000")
})
app.use(express.static('public'))
var server = new WebSocket.Server({port: 3200})
server.on('connection', function(socket) {
console.log("Connected, using WebSocket")
console.log(server.clients.size)
socket.on('message', function(msg) {
server.clients.forEach(function each(client) {
client.send(msg)
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" v-on:mousemove="clientCoords">
<p>{{displayX}}</p>
<p>{{displayY}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
clientInformation: {}
,
clientList: [
],
clientCoord: {},
displayX: '',
displayY: '',
socket: new WebSocket('ws://localhost:3200')
}
},
methods:{
clientCoords(e){
this.clientInformation.coordX = e.clientX
this.clientInformation.coordY = e.clientY
this.socket.send(JSON.stringify(this.clientInformation))
}
},
mounted() {
this.clientList.push(this.clientInformation)
this.socket.addEventListener('message', (msg) => {
this.displayX = JSON.parse(msg.data).coordX
this.displayY = JSON.parse(msg.data).coordY
})
}
})
</script>
<style>
#app {
height: 100%;
}
body {
height: 100%;
}
html {
height: 100%;
}
</style>
</body>
</html>
文件
{{displayX}}
{{display}}
var app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
客户端信息：{}
,
客户名单：[
],
客户合作社：{}，
displayX:“”，
显示：“”，
套接字：新WebSocket（'ws://localhost:3200'）
}
},
方法：{
clientCoords（e）{
this.clientInformation.coordX=e.clientX
this.clientInformation.coordY=e.clientY
this.socket.send（JSON.stringify（this.clientInformation））
}
},
安装的（）{
this.clientList.push（this.clientInformation）
this.socket.addEventListener（'message'，（msg）=>{
this.displayX=JSON.parse（msg.data）.coordX
this.display=JSON.parse（msg.data）.coordY
})
}
})
#应用程序{
身高：100%；
}
身体{
身高：100%；
}
html{
身高：100%；
}