1、先新建一个html网页用于展示效果
<!DOCTYPE html>
<html>
<head>
<style>
/* #box{
width: 300px;
height: 300px;
border: 1px rgb(158, 158, 158) solid;
} */
</style>
</head>
<body>
<!-- 用于用户输入 -->
<input type="text" placeholder="请输入" id="ipt">
<button id="btn">发送请求</button>
<!-- 聊天框 -->
<div id="box">
</div>
<script>
//html5自带ws，这里直接创建ws对象，并输入发送地址
var socket = new WebSocket('ws://localhost:3000')
//简单的创建三个常量用于分别提示信息，离开信息，普通消息
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
//用于测试，是否连上服务器服务端
socket.addEventListener('open', function () {
document.getElementById("box").innerText = '服务建立成功'
})
//定义发送信息按钮的点击事件
document.getElementById('btn').addEventListener('click', function () {
//获取输入框中的信息
var value = document.getElementById('ipt').value
//调用ws对象发送信息
socket.send(value);
document.getElementById('ipt').value = ''
})
//ws对象的接收信息方法，用于接收服务器发送给浏览器的信息
socket.addEventListener('message', function (e) {
var data = JSON.parse(e.data)
//新建div，用于追加到box中
var dv = document.createElement('div')
//拼接一下服务器返回过来的数据，做一些简单的格式处理
dv.innerText = data.msg + "--" + data.time
//判断发送出来的信息的类型，用不同的颜色做区分
if (data.type===TYPE_ENTER){
dv.style.color='green'
}
if (data.type===TYPE_LEAVE){
dv.style.color='red'
}
//把新消息追加到聊天框中，提供给所有人查阅
document.getElementById("box").appendChild(dv)
})
</script>
</body>
</html>
2、使用nodejs搭建一个简单的websocket服务
一、 可以在第一步的index.html同级目录下，创建一个新的文件夹 ，如websocket,然后在websocket文件夹中创建一个app.js文件。如下图：
c1bc7b17acd2c40641f9816ed7ec5e56_413fdf33756a460285f0bdecbfa6e296.png
二、在app.js中编写一个简单的本地websocket服务先使用 npm install nodejs-websocket 安装依赖
const WebSocket = require('nodejs-websocket')//引入刚刚npm下载的依赖
const PORT=3000 //设置监听的端口
//简单的定义一下不同的消息常量
const TYPE_ENTER=0
const TYPE_LEAVE=1
const TYPE_MSG=2
//记录聊天组人数
var count=0
//创建wb服务
const wss = WebSocket.createServer(connect=>{
//当有人连接成功，人数+1
count++
//设置新来的用户的，用户名称
connect.userName=`用户${count}`
//自己在封装的，集体广播/发送信息的方法
//有人连接上了我们的聊天组，自动发消息告诉当前聊天组所有人
//发送一个对象，里面封装了消息类型，具体信息，当前时间
broadcast({
type:TYPE_ENTER,
msg:`${connect.userName}进入了聊天室`,
time:new Date().toLocaleTimeString()
})
//ws自己的方法，当接收到用户信息时触发
//这里直接调用集体广播方法，发送给所有人
connect.on("text",data=>{
broadcast({
type:TYPE_MSG,
msg:data,
time:new Date().toLocaleTimeString()
})
})
//ws自己的方法，当有 用户离开当前聊天组时触发
connect.on("close",data=>{
//有人离开，当前人数减一
count--
//发送消息的逻辑与上面同理
broadcast({
type:TYPE_LEAVE,
msg:`${connect.userName}离开了聊天室`,
time:new Date().toLocaleTimeString()
})
})
//ws自己的方法，简单的处理一下异常
connect.on("error",data=>{
console.log('发生异常');
})
})
//自己封装的全体广播方法，
function broadcast(msg){
//使用ws中的connections方法获取到当前聊天组的所有用户信息
//循环发送信息给不同的用户
wss.connections.forEach(item=>{
console.log("msg",msg);
//这里转json因为原生的websocket不支持发送json，所以转一下字符串
item.send(JSON.stringify(msg))
})
}
//监听端口
wss.listen(PORT,()=>{
console.log("服务启动成功");
})
然后使用 node ./app.js启动即可
