Node端
首先要先下载ws
模块npm i -S ws
。
const { WebSocketServer } = require('ws');
function initWS() {
const wss = new WebSocketServer({
port: 3111,
});
// 前端连接成功会进connection
wss.on('connection', (ws) => {
ws.on('error', () => {
console.log('ws error');
});
// 收到前端发送的消息,会进message监听
ws.on('message', (data) => {
console.log(data.toString());
ws.send('我是后端');
});
});
}
module.exports = {
initWS
};
这样一个webSocket服务就创建成功了。前端通过ws://127.0.0.1:3111
连接即可(这里是在本地,发布到线上要写先线上地址)。
前端部分
以Vue项目为例:
data: ()=>{
return {
ws: null
}
},
mounted() {
// 连接web socket服务
this.ws = new WebSocket('ws://127.0.0.1:3111');
// 连接成功回调
this.ws.onopen = () => {
console.log('WebSocket connected');
};
// 接收到消息回调
this.ws.onmessage = (data) => {
console.log('接收到后端消息:', data);
};
}
methods: {
sendWsMessage(){
this.ws.send('我是前端');
}
}
websocket连接成功之后,调用send方法向socket服务发送消息,触发服务端的message监听后立即向前端回复了消息,前端在message中接收到后端的回复消息。