一.引入模块
const http = require('http');
const fs = require('fs');
const socketio = require('socket.io');
这里我们引入第一个 http 模块 用来创建服务 然后我没引入第二个 fs 模块 用来读写 这里第三个模块 socket.io 模块呢 要先使用 npm install socket.io 来安装我们的插件
二.创建Web服务
const server = http.createServer((req,res) => {
fs.readFile('./hpage.html',(err,data)=>{
res.writeHead(200,{'Content-type': 'text/html'})
res.end(data)
})
}).listen(52273,()=>{
console.log('服务启动了:http://127.0.0.1:52273');
})
这里我们创建的web服务读写了hpage.html文件 然后监听了52273端口响应了服务
三、创建一个socket服务
let id = 0;
const io = socketio.listen(server);
io.sockets.on('connection',(socket)=>{
console.log('客服端已连接');
id = socket.id;
socket.on('serverData',(data)=>{
console.log('客服端发送过来的数据是:'+data);
socket.broadcast.emit('serverData','服务器端返回给客户端的数据是B')
})
})
四、配置客服端 hpage.html
<!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>
<input type="text" id="text">
<input type="button" value="发送" id="btn">
<!-- 这是一个客户端 小A-->
<script src="/socket.io/socket.io.jsp"></script>
<script>
//当页面加载的时候 去访问服务器
window.onload = () => {
//连接webSocket服务器
var socket = io.connect();
//监听服务器端的事件和数据
socket.on('serverData', function (data) {
alert(data)
})
//创建一个表单的点击事件
document.getElementById('btn').onclick = function () {
//获取表单数据
var text = document.getElementById('text').value
//向服务端发送事件和数据
socket.emit('serverData', text)
}
}
</script>
</body>
</html>
这里我们使用input标签 文本框 和 button按钮来呈现页面 在input文本框中输入内容 再使用button按钮实现发送
socket.io/socket.io.jsp 这个路径是你书写了js的时候你引入的socket.io模块中携带的文件
五、实现效果
效果一、
这里使用的是pubic通信类型 是服务器向所有的客户端传递数据（包含自己）
效果二、
这里使用的是broadcast提醒类型 是服务器向所有的客户端传递数据（不包含自己）
效果三、
这里使用的是private通信类型 是向指定的客户端发送数据
六、注：
WebSocket服务必须是在同一个局域网下面的，例如你的电脑是A端，你同桌（朋友）的电脑是B端
需要你同桌连接到你的服务 响应之后可以互相在网页上聊天
