基于WebSocket的在线文字聊天室

与Ajax不同，WebSocket可以使服务端主动向客户发送响应，本案例就是基于WebSocket的一个在线聊天室，不过功能比较简单，只能满足文字交流。演示如下。

案例学习于b站up主，链接 。这位up主讲的非常清楚，值得去学习。本文属于记录自我学习过程的文章。

项目目录下app.js

//导入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000

//创建一个server
const server = ws.createServer(connect => {
	console.log('有用户连接上来了')
})

server.listen(PORT,() => {
	console.log('websocket服务启动成功了，监听了端口'+PORT)
})

项目目录下打开终端 

npm install nodejs-websocket

 下载成功后。

 项目目录下index.html

 

去掉css。 

app.js 

//导入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000

//连接的数量
let count = 0
//创建一个server
const server = ws.createServer(connect => {
	console.log('新的连接')
	count++
	connect.userName = `用户${count}`
	broadcast(`${connect.userName}进入了聊天室`)
	//接收
	connect.on('text',data => {
		broadcast(data)
	})
	//关闭
	connect.on('close',data => {
		console.log('关闭连接')
		count--
		broadcast(`${connect.userName}离开了聊天室`)
	})
	//异常
	connect.on('error',data => {
		console.log('发生异常')
	})
})

//广播
function broadcast(msg) {
	server.connections.forEach(item => {
		item.send(msg)
	})
}

server.listen(PORT,() => {
	console.log('websocket服务启动成功了，监听了端口'+PORT)
})

 index.html

	
		
		
		
	
	
		

		
		发送
		
	

浏览框1

 

 浏览框2

 

稍微美化页面，增强一下逻辑。在浏览器内打开三个窗口，既有3个人参与到聊天室中，现在可以聊天了。

 用户1

用户2 

 用户3

 主要代码

请先安装node.js并已下载websocket的环境。

项目目录：

app.js

//导入nodejs-websocket包
const { connect } = require('net')
const ws = require('nodejs-websocket')
const PORT = 3000
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2

//连接的数量
let count = 0
//创建一个server
const server = ws.createServer(connect => {
	console.log('新的连接')
	count++
	connect.userName = `用户${count}`
	broadcast({
		type: TYPE_ENTER,
		msg: `${connect.userName}进入了聊天室`,
		time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')
	})
	//接收
	connect.on('text',data => {
		broadcast({
			type: TYPE_MSG,
			msg: connect.userName + ':' + data,
			time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')
		})
	})
	//关闭
	connect.on('close',data => {
		console.log('关闭连接')
		count--
		broadcast({
			type: TYPE_LEAVE,
			msg: `${connect.userName}离开了聊天室`,
			time: new Date().toLocaleString('chinese',{hour12:false}).slice(2).replace(/-/g,'/')
		})
	})
	//异常
	connect.on('error',data => {
		console.log('发生异常')
	})
})

//广播
function broadcast(msg) {
	server.connections.forEach(item => {
		item.send(JSON.stringify(msg))
	})
}

server.listen(PORT,() => {
	console.log('websocket服务启动成功了，监听了端口'+PORT)
})

 index.html

	
		
		
		
	
	
		

			

			
聊天室
			

				
				发送