专注前端开发和vps技术交流的博客-纸飞机一、目录结构
目录分析:
- WebSocketServer.js:服务端配置文件
- server.js:给客户端的静态服务器
- client下的文件:客户端配置
二、操作步骤
准备:
- 项目根目录初始化,创建package.json文件
- 下载两个依赖包,ws服务器模块,和express模块
npm install ws --save-dev
npm install express --save-dev步骤1：服务端构建（WebSocketServer.js)
// 步骤1,服务端
const webSocket=require('ws');//引入ws服务器模块
const ws=new webSocket.Server({port:8000});//创建服务器,端口为8000
let clients = {}
let clientNum = 0
ws.on('connection',(client)=>{//连接客户端
//给客户端编号,也就是参与聊天的用户
client.name=++clientNum;
clients[client.name]=client;
// 用户的聊天信息
client.on('message',(msg)=>{
console.log('用户'+client.name+'说:'+msg)
//广播数据发送输出
broadcast(client,msg)
})
//报错信息
client.on('error',(err=>{
if(err){
console.log(err)
}
}))
// 下线信息
client.on('close',()=>{
delete clients[client.name];
console.log('用户'+client.name+'下线了~~')
})
})
//广播方法
function broadcast(client,msg){
for ( var key in clients){
clients[key].send('用户'+client.name +'说：'+msg)
}
}步骤2:客户端静态服务器构建(server.js)
// 步骤2
const express=require('express');//引入express模块
const path=require('path');//引入磁盘路径模块
const app=express();
const port=3000;//端口
const host='127.0.0.1';//主机
app.use(express.static(path.resolve(__dirname,'./client')));//设置要开启服务的路径
app.listen(port,host,()=>{//监听服务
console.log(`客户端服务器为:http://{host}:{port}`)
})步骤3:客户端页面构建(index.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>客户端</title>
</head>
<body>
<h1>聊天室</h1>
<div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
<br />
<div>
<input type="text" id="msg" style="width: 200px;">
</div>
<button id="submit">提交</button>
<script src="client.js" charset="utf-8"></script>
<script>
document.querySelector('#submit').addEventListener('click', function () {
var msg2 = msg.value
ws.send(msg2)
msg.value = ''
}, false)
</script>
</body>
</html>步骤4:客户端连接到服务端配置(client.js)
// 步骤4
const ws = new WebSocket('ws://127.0.0.1:8000')//连接到客户端
//上线
ws.onopen=()=>{
ws.send('我上线啦')
}
//发送信息
ws.onmessage=(msg)=>{
const content=document.getElementById('content');
content.innerHTML+=msg.data+'<br>'
}
//报错
ws.onerror=err=>{
console.log(err)
}
//下线
ws.onclose=()=>{
console.log('close')
}到这里就已经完成
分别启动 WebSocketServer.js ,client.js
node WebSocketServer.js
node client.js运行是没有问题的,可以自行测试,代码已经放出
http://xzh.i3geek.com
