介绍
WebSocket是一种在单个TCP连接上进行全双工通信的协议,在web开发中常用于实现实时通信。Node.js提供了一个内置模块ws来实现WebSocket服务端。
下面是一个简单的例子:
// 导入ws模块
const WebSocket = require('ws');
// 创建WebSocket服务器
const wss = new WebSocket.Server({
port: 8080 });
// 监听连接事件
wss.on('connection', function (ws) {
console.log('客户端连接成功');
// 监听接收消息事件
ws.on('message', function (message) {
console.log('接收到客户端消息:', message);
// 发送消息到客户端
ws.send('服务器收到消息:' + message);
});
// 监听关闭连接事件
ws.on('close', function () {
console.log('客户端断开连接');
});
});
我们首先导入ws模块,然后通过WebSocket.Server创建一个WebSocket服务器。接着监听connection事件,当有客户端连接时就会执行回调函数,并创建一个WebSocket实例。然后我们可以监听message事件来接收客户端发送的消息,使用ws.send方法将消息发送给客户端。最后,我们还监听close事件,当客户端断开连接时会执行回调函数。
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var socket
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket
}
if(window.WebSocket){
socket = new WebSocket("ws://localhost:8080/ws")
socket.onmessage = function(event){
var ta = document.getElementById('responseTest')
ta.value = ta.value + '\n' + event.data
}
socket.onopen = function(event) {
var ta = document.getElementById('responseTest')
ta.value = '连接开启!'
}
socket.onclose = function(event) {
var ta = document.getElementById('responseTest')
ta.value = '连接关闭!'
}
}else{
alert('你的浏览器不支持WebSocket')
}
function send(message){
if(!window.WebSocket){
return
}
if(socket.readyState === WebSocket.OPEN){
socket.send(message)
}else{
alert('连接没有开启')
}
}
</script>
<form onsubmit="return false">
<h3>WebSocket 聊天室:</h3>
<textarea id="responseTest" style="width: 500px;height: 300px;"></textarea>
<br>
<input type="text" name="message" style="width: 300px;" value="Welcome to woniuxy.com">
<input type="button" value="发送消息" onclick="send(this.form.message.value)">
<input type="button" value="清空聊天记录" onclick="javascript:document.getElementById('responseTest').value=''">
</form>
</body>
</html>