WebSocket
介绍:
WebSocket 是一种网络传输协议,可在单个 TCP 连接上进行全双工通信。它允许服务器主动向客户端推送信息,客户端也能实时接收服务器的响应。
客户端
这里实现了将input内的内容发送给客户端,并将接收到的服务器的消息显示在messages中
<div><!-- 接受消息 --><ul id="messages"></ul><input id="keywords" type="text"><button id="send">Send</button><button id="close">Close</button>
</div><script>javascript">const socket = new WebSocket('ws://localhost:9002');socket.addEventListener("open", function(event) {console.log('Connected to server');// socket.send('Hello from client');});socket.addEventListener("message", function(event) {console.log('Received message from server:'+ event.data);const li = document.createElement('li');li.textContent = event.data;messagesList.appendChild(li);});socket.addEventListener("close", function(event) {console.log('Connection closed');});// 发消息const sendBtn = document.getElementById('send');const closeBtn = document.getElementById('close');const keywordsInput = document.getElementById('keywords');const messagesList = document.getElementById('messages');sendBtn.addEventListener('click', function() {const message = keywordsInput.value;const data = JSON.stringify({user: 'Client1',message: message});socket.send(data);// const li = document.createElement('li');// li.textContent = message;// messagesList.appendChild(li);keywordsInput.value = '';});closeBtn.addEventListener('click', function() {socket.close();});
</script>
服务端
这里我自己写了个简单的node服务器来做测试
javascript">
const http = require('http');
const WebSocketServer = require('ws').Server; const server = http.createServer();
const wss = new WebSocketServer({ server });// 接收其他请求
server.on('request', (req, res) => {res.end('Hello, world!');
});wss.on('connection', (ws) => {console.log('Client connected');ws.on('message', (data) => { console.log(`Received message: ${data}`);data = JSON.parse(data);// 实现websocket单发ws.send(`${data.user}: ${data.message}`);});ws.on('close', () => { console.log('Client disconnected');});
});server.listen(9002, () => {console.log('Server started on port 9002');
});
效果:
有趣的来了,如果你想实现服务器给所有客户端群发消息,类似聊天对话的效果可以这么做:
将
javascript">// 实现websocket单发
ws.send(`${data.user}: ${data.message}`);
改为
javascript">// 实现websocket群发
wss.clients.forEach(function each(client) {client.send(`${data.user}: ${data.message}`);
});
聊天对话效果: