当前位置：首页 > news >正文

websocket实现一个简单聊天框

news 2025/7/12 16:37:52

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) {// 每个用户连接都会有一个socketsocket.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.emitsocket.emit('loginSuccess', data)// 广播消息，告诉所有用户io.emit，有用户加入聊天室io.emit('addUser', data)// 告诉所有用户当前群聊有多少人io.emit('userList', users)//把登录成功的用户名和头像存储起来socket.username = data.usernamesocket.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.usernameavatar = 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 {// 显示在左边}
})