1.新的客户端连接成功，发送其它客户端的坐标信息
2.客户端更新坐标信息的时候，通知其它客户端
3.客户端断开连接，通知其它客户端
4.广播消息类型分为修改坐标与移除坐标
编写客户端html页面
由于socket.io是自定义的框架，所以客户端需要引用socket.io.js，这个js可以从socket.io模块里查找，路径一般为node_modules\socket.io\node_modules\socket.io-client\dist,里面有合并与压缩两个版本，开发的时候可以用合并版.
完整代码如下:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>socket.io 多人同时在线互动 例子</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="https://www.jb51.net/socket.io.js"></script>
<script type="text/javascript">
var ws = io.connect('http://localhost:9091/');
var isfirst;
ws.on('connect', function(){
console.log(ws);
// 开始绑定mousemove事件
document.onmousemove = function(ev){
if(ws.socket.transport.isOpen){
ws.emit('position.change', { x: ev.clientX, y: ev.clientY });
}
}
})
ws.on('position.change', function(data){
// 开始同时在线的别的客户端
if(!isfirst){
isfirst = true;
// 第一条消息是收到别个所有客户端的坐标
for(var i in data){
move(i, data[i]);
}
}else{
// 否则，要不就是别个断开连接的消息，或者别个更新坐标的消息
if('position' == data.type){
move(data.id, data.postion);
}else{
remove(data.id);
}
}
})
ws.on('error', function(){
console.log('error:', ws);
ws.disconnect();
})
function move(id, pos){
var ele = document.querySelector('#cursor_' + id);
if(!ele){
// 不存在，则创建
ele = document.createElement('img');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = 'absolute';
document.body.appendChild(ele);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
function remove(id){
var ele = document.querySelector('#cursor_' + id);
ele.parentNode.removeChild(ele);
}
</script>
</body>
</html>
页面中的img/cursor.png,可以这里找到,cursor.png,这里也有很多其它的鼠标图标,前端的原理比较简单，简单的分析如下