ajax node一对一聊天室,Node.js+ws模块实现websocket通信(聊天室案例)

一、目录结构

目录分析:

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)

客户端

聊天室

提交

document.querySelector('#submit').addEventListener('click', function () {

var msg2 = msg.value

ws.send(msg2)

msg.value = ''

}, false)

步骤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+'
'

}

//报错

ws.οnerrοr=err=>{

console.log(err)

}

//下线

ws.onclose=()=>{

console.log('close')

}

到这里就已经完成

分别启动 WebSocketServer.js ,client.js

node WebSocketServer.js

node client.js

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