WebSocket

H5原生WebSocket使用

建立连接步骤

1. 创建WebSocket实例
2. 链接WebSocket服务器
3. 监听消息

// 创建实例
let ws = new WebSocket('ws://127.0.0.1:3000');

// 连接服务器
ws.onopen = (e) => {
	console.log('已连接上服务器');
	ws.send('Hello');
};

// 监听消息
ws.onmessage = (e) => {
	console.log(e);
};

// 监听错误
ws.onerror = (e) => {
	console.log(e.message)
};

// 监听连接关闭
ws.onclose = (e) => {
	console.log(e);
};

使用soocket.io

1. H5端

// 创建实例
// 建立连接
// 监听消息
const name = '张三'

// 创建实例并连接服务器
let socket = io()

// 发送消息socket.emit('自定义消息名称', '消息内容')
socket.emit('join', name)

// 监听join消息
socket.on('join', name => {
	console.log(name + '加入群聊')
})

// 监听message消息
socket.on('message', msg => {
	console.log('接收到消息:' + msg)
})

socket.emit('message', 'Hello everyone!')

2. 服务器端(node.js)

const express = require('express')
const app = express()
const http = require('http').Server(app)
const io = require('socket.io')(http)

let usocket = {};

// 无关代码 START
app.engine('html', require('express-art-template'))
app.use('/public', express.static('./public'))

app.get('/', (req, res) => {
    res.render('index.html')
})
// 无关代码 END

io.on('connection', socket => {
	console.log('客户连接上服务器')
	socket.on('join', name => {
		cosnole.log(name + '加入了群聊')
		usocket[name] = socket
		io.emit('join', name)
	})

	socket.on('message', msg => {
		console.log('接收到消息:' + msg)
		io.emit('message', msg)// 将消息广播出去
	})
})


http.listen(3000, () => {
    console.log('listen on port 3000')
})