前端
一点也不简单

Node.js+ws模块实现websocket通信(聊天室案例)

一、目录结构

websocket目录结构

目录分析:

  1. WebSocketServer.js:服务端配置文件
  2. server.js:给客户端的静态服务器
  3. client下的文件:客户端配置

二、操作步骤

准备:

  1. 项目根目录初始化,创建package.json文件
  2. 下载两个依赖包,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

运行是没有问题的,可以自行测试,代码已经放出

赞(5) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Node.js+ws模块实现websocket通信(聊天室案例)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏