工业机器人示教器通常是一个带物理按键和触摸屏的手持设备，用于手动控制各轴运动、示教点位和编辑作业程序。当产线需要远程调试或快速切换工艺时，网页版示教器可以复用现有的平板或PC，省去额外硬件成本。本文以jQuery为核心，配合WebSocket实时通信，实现一个可运行的网页版Teach Pendant，涵盖点动控制、程序管理、状态回显和安全急停。
一、整体架构与通信方案
前端使用jQuery处理DOM操作、事件绑定和动态渲染，后端采用Node.js作为中间层，通过WebSocket与浏览器保持长连接。中间层再根据机器人控制器的协议（如TCP Socket、OPC UA或厂商SDK）下发运动指令。这样做的好处是浏览器端不用关心机器人控制器的底层协议，只需与中间层交换JSON消息，便于调试和扩展。
通信格式定义为统一的消息对象，例如{ cmd: 'jog', axis: 'x', dir: '+', speed: 50 }。WebSocket适合这种低频但需要实时反馈的控制场景，相比HTTP轮询，延迟更低，也能由服务端主动推送状态变化。
下面是一个简单的Node.js WebSocket服务端骨架，只负责收发消息并转发给模拟机器人模块。生产环境需要替换为真实控制器的驱动。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function(socket) {
socket.on('message', function(message) {
const data = JSON.parse(message);
// 模拟机器人控制器，实际应调用驱动器或SDK
const ack = { type: 'status', state: 'running', pos: { x: 100, y: 20, z: 300 } };
socket.send(JSON.stringify(ack));
});
});
前端则通过new WebSocket建立连接，并在onmessage中处理状态回传。示例中的ack对象可以根据真实机器人反馈调整字段。该方案的最大优点是把协议差异隔离在中间层，前端代码可以保持稳定，即使后端机器人型号更换，也只需要修改驱动模块。
二、jQuery界面布局与JOG点动控制
示教器页面划分为坐标轴选择区、倍率区、点动按钮区和状态显示区。使用jQuery动态生成按钮，可以减少重复的HTML代码，也方便根据机器人轴数自动扩展。例如6轴机器人需要生成X、Y、Z、RX、RY、RZ六组按钮。
JOG点动的关键交互是按住按钮时持续发送移动指令，松开时立即发送停止指令。浏览器端的mousedown和mouseup事件可以满足PC操作，移动端则需要同时监听touchstart和touchend以避免300毫秒延迟。
以下代码展示如何用jQuery绑定点动按钮事件，并在按下和松开时发送不同的JSON消息。
$(function() {
var socket = new WebSocket('ws://127.0.0.1:8080');
var jogInterval = null;
function sendJog(axis, direction, speed) {
var msg = { cmd: 'jog', axis: axis, dir: direction, speed: speed };
socket.send(JSON.stringify(msg));
}
function startJog(axis, direction) {
var speed = $('#speed').val();
sendJog(axis, direction, speed);
// 如果控制器不支持连续运动，可用定时器模拟增量发送
jogInterval = setInterval(function() {
sendJog(axis, direction, speed);
}, 200);
}
function stopJog() {
if (jogInterval) {
clearInterval(jogInterval);
jogInterval = null;
}
socket.send(JSON.stringify({ cmd: 'stop' }));
}
$('.jog-button').on('mousedown touchstart', function(e) {
e.preventDefault();
var axis = $(this).data('axis');
var dir = $(this).data('dir');
startJog(axis, dir);
}).on('mouseup touchend mouseleave', function() {
stopJog();
});
socket.onmessage = function(event) {
var data = JSON.parse(event.data);
$('#state').text(data.state);
$('#pos-x').text(data.pos.x);
$('#pos-y').text(data.pos.y);
$('#pos-z').text(data.pos.z);
};
});
这里使用了data-axis和data-dir属性来区分按钮对应的轴和方向，避免为每个按钮单独编写事件监听。如果需要更精细的倍率控制，可以在startJog中读取下拉框的值，并将该值作为speed字段发送。
需要注意的是，如果机器人控制器本身支持连续JOG指令，那么不需要setInterval模拟；但对于仅支持增量运动的控制器，这种定时器方式可以近似实现连续点动，只要确保停止指令能在松开时及时到达。
三、程序列表管理、状态回显与安全急停
程序列表是示教器的重要功能，操作员需要选择已示教的任务并启动或停止运行。前端用jQuery向后端请求程序列表，并渲染为可点击的选项列表。后端负责维护程序文件或数据库记录，返回JSON数组。
状态回显包括关节角度、笛卡尔坐标、运行模式、报警信息等。通过WebSocket推送，前端在onmessage中统一解析并更新视图。为了保证界面流畅，状态更新频率建议控制在10Hz左右，避免过于频繁的DOM操作造成卡顿。
急停按钮必须独立于普通指令通道，最好通过单独的WebSocket消息类型或甚至HTTP POST接口直接触发控制器急停，不能依赖前端定时器或普通消息队列。下面的例子展示急停按钮的点击处理，同时加入确认弹窗避免误触。
$('#estop').on('click', function() {
if (confirm('确定要触发急停吗？')) {
$.ajax({
url: '/api/estop',
type: 'POST',
data: { source: 'web_teach_pendant' },
dataType: 'json',
success: function(res) {
if (res.ok) {
$('#estop-state').text('EMERGENCY STOP');
$('#estop-state').addClass('estop-active');
}
},
error: function() {
alert('急停请求失败，请检查通信');
}
});
}
});
代码块中的confirm是浏览器原生方法，适用于简单的确认场景。生产环境建议换成自定义模态框，防止被浏览器拦截或样式不统一。
此外，心跳检测也是安全设计的一部分。如果WebSocket断开超过1秒，前端应自动显示通信故障并禁用所有JOG按钮，避免出现操作员以为机器人停止但实际连接已断的情况。可以在onclose事件中实现该逻辑。
四、部署与性能注意事项
网页示教器通常部署在工厂局域网内，对延迟要求较高。建议将静态资源（HTML、CSS、JS）和后端服务部署在同一台边缘网关或工控机上，减少跨网段路由带来的延迟。jQuery本身体积不大，但若需要兼容旧版IE，应选用1.x或2.x版本；现代浏览器可以使用3.x精简版。
移动端设备的触摸事件需要额外处理，例如阻止页面滚动和缩放，以保证按住JOG按钮时不会误触浏览器手势。可以通过CSS的touch-action: manipulation和user-select: none进行优化。
当页面长时间运行时，需要注意内存泄漏问题。jQuery的事件绑定尽量使用事件委托，而不是对大量动态元素重复绑定。例如使用$(document).on('mousedown', '.jog-button', handler)替代$('.jog-button').on(...)，这样即使按钮被重新渲染也无需重新绑定。
最后，所有发送给机器人的运动指令都必须经过服务端鉴权和参数校验，避免恶意或误操作直接控制机器人。可以在中间层增加操作日志，记录每一次JOG、程序启动和急停事件，便于事后追溯。