websocket实现一个简单聊天框

websoket在客户端的使用

事件：open/message/error/close
方法：send/close

var socket = new WebSocket(url)

// 服务连接成功时触发
socket.addEventListener('open', function() {
	console.log("连接成功了")
})

// 主动给websocket发消息
socket.send('hello')

// 接收websocket的消息
socket.addEventListener('message', function(e) {
	console.log("客户端收到数据了", e.data)
})

// 服务断开时触发
socket.addEventListener('close', function() {
	console.log("服务断开连接")
})

websocket在服务端怎么用

事件：text/close/error等

const ws = require('nodejs-websocket')

// 获取浏览器的数据并给浏览器发送数据
var server = ws.createServer(function(conn) {
	console.log('接收到了新的连接')
	conn.on('text', data => {
		// 收到的消息
		console.log(data)
		conn.send(data.toUpperCase())
	})
	
	// 关闭连接时触发
	conn.on('close', data  => {
		console.log('连接断开了')
	})
	// 发生异常时触发
	conn.on('error', data  => {
		console.log('连接出错了')
	})
})

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

使用socketio实现简单聊天室

准备： 安装一些依赖包 nodejs-websocket等
服务端：

var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server)
const users = [] // 已登录的用户信息

server.listen(3000, () => {
	console.log('服务器启动成功了')
})

// express处理静态资源
// 把public目录设置成静态资源目录
app.use(require('express').static('public'))
app.get('/', function(req, res) {
	res.redirect('./index.html')
})

io.on('connection', function(socket) {
	// 每个用户连接都会有一个socket
	socket.on('login', data => {
		// 判断,如果data在user中存在，说明已经登录了，不允许登录。否则允许登录
		let user = users.find(item => item.username === data.username)
		if (user) {
			socket.emit('loginError', { msg: '登录失败' })
		} else {
			// 表示不存在
			users.push(data)
			// 告诉当前用户socket.emit
			socket.emit('loginSuccess', data)
			// 广播消息，告诉所有用户io.emit，有用户加入聊天室
			io.emit('addUser', data)
			// 告诉所有用户当前群聊有多少人
			io.emit('userList', users)
			
			//把登录成功的用户名和头像存储起来
			socket.username = data.username
			socket.avatar = data.avatar 
		}
	})

	// 用户断开连接的功能
	socket.on('disconnect', () => {
		// 把当前用户信息删除掉
		let idx = users.findIndex(item => item.username === socket.username)
		users.splice(idx, 1)
		// 告诉所有人有人离开
		io.emit('delUser', {
			username: socket.username,
			avatar: socket.avatar
		})
		// userList发生变化
		io.emit('userList', users)
	})

	// 监听聊天的消息
	socket.on('sendMessage', data => {
		// 广播给所有用户
		io.emit('receiveMessage', data)
	})
	
	// 接收图片信息
	socket.on('sendImage', data => {
		// 广播给所有用户
		io.emit('receiveImage', data)
	})
})

客户端：

<script src="/socket.io/socket.io.js"></script>

// 1、连接socketio服务
var socket = io('http://localhost:3000')
var username, avatar

// 2、登录功能
socket.emit('login', {
	username: username,
	avatar: avatar
})

socket.on('loginError', data => {
	alert('用户名已存在')
})

socket.on('loginSuccess', data => {
	alert('登录成功')
	username = data.username
	avatar = data.avatar
})

// 监听添加用户的信息
socket.on('addUser', data => {
	alert(data.username + '加入了群聊')
})

// 监听所有用户的信息
socket.on('userList', data => {
	alert('当前人员有' + data)
})

// 监听用户离开的信息
socket.on('delUser', data => {
	alert(data.username + '下线了')
})

// 给服务器发消息
socket.emit('sendMessage', {
	msg: content,
	username: username,
	avatar: avatar
})

//  监听聊天的消息
socket.on('receiveMessage', data => {
	// 把接收到的消息显示到窗口中
	if (data.username === username) {
		// 自己的消息显示在右边
	} else {
		// 显示在左边
	}
})

// 发送图片给服务器
var file = ...
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function() {
	socket.emit('sendImage', {
		msg: content,
		username: username,
		image: fr.result
	})
}

// 监听图片聊天记录
socket.on('receiveImage', data => {
	// 把接收到的图片显示到窗口中
	if (data.username === username) {
		// 自己的消息显示在右边
	} else {
		// 显示在左边
	}
})