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 {
// 显示在左边
}
})