服务端代码:
实现安装:nodejs-websocket模块
npm i nodejs-websocket -S
服务端代码如下:
var ws = require("nodejs-websocket");
var ws=require("nodejs-websocket");//引入websocket模块
console.log("开始建立连接...");//后台打印状态信息
var server=ws.createServer(function(connect){//创建一个新连接
connect.on("text",function(msg){//接收触发事件
console.log("收到的消息是:"+msg);//接收到新消息之后在后台打印出来
if(msg){//如果消息不是空,将接收到的消息发送给客户端
connect.send('接收到的消息是:'+msg);
}
});
}).listen(8000);
客户端代码如下:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<button id='send'>发送</button>
<input type='text' id='inputText'>
<p id='dispStatus'>正在连接...</p>
<script>
var inputText=document.getElementById('inputText');//读输入框的句柄
var dispStatus=document.getElementById('dispStatus');//读按钮的句柄
var ws=new WebSocket('ws://127.0.0.1:8000');//创建websocket连接,,服务端的IP+端口号
ws.onopen=function(e){//开始创建连接时的事件,显示连接成功
dispStatus.innerHTML='连接成功';
}
document.getElementById('send').onclick=function(e){//按钮按下触发事件,
ws.send(inputText.value);//按下按钮向服务端发送输入框中的值
}
ws.onmessage=function(e){//读取服务端接收到的信息
dispStatus.innerHTML=e.data;//将信息显示出来
}
</script>
</body>
</html>
客户端打开页面,点击“发送 ”按钮可以看到完整过程。
附:客户端的完整步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input type="text" width="200" id="text-container" /><input type="button" value="Start" onclick="start()" />
</div>
<div id="messages"></div>
<script type="text/javascript">
var webSocket;
function connect() {
webSocket = new WebSocket('ws://localhost:9000');//建立通道
}
connect();
webSocket.onerror = function (event) {
alert(event.data);
};
//与WebSocket建立连接
webSocket.onopen = function (event) {
//向服务器发送请求
webSocket.send('我是jCuckoo');
document.getElementById('messages').innerHTML = '与服务器端建立连接';
};
//处理服务器返回的信息
webSocket.onmessage = function (event) {
document.getElementById('messages').innerHTML += '<br />' + event.data;
};
// 连接停止后自动连上
webSocket.onclose = function(e){
console.log('套接字已关闭。将在1秒后尝试重新连接。', e.reason);
setTimeout(function(){
connect();
}, 1000)
}
function start() {
webSocket.send(document.getElementById("text-container").value);
}
</script>
</body>
</html>