运用的库:Koa、http、socket.io。
一个难点在于怎么起socket.io的服务:
//服务端
const Koa = require('koa');
const http = require('http');
const serve = require('koa-static');
const app = new Koa;
app.use(serve(__dirname + '/static'));
const server = http.createServer(app.callback());
const io = require('socket.io')(server);
//客户端
const socket = io("ws://localhost:3131");
知识点:
1、emit是传送,on是接收。
2、io是全局的,多对一(io),一对多(io)
socket是唯一的,具有唯一的id,存在APIsocket.id
涉及到的功能:
1、获取到用户的昵称
运用原生web API在网址上获取到用户昵称,即网址后面的一串搜索字符串,在前端叫location.search,在后端叫queryString
const urlSearchParams = new URLSearchParams(location.search);
const username = urlSearchParams.get('username');
2、用户进入聊天室,当前用户提示,欢迎加入聊天室,其他用户提示,XXX已离开聊天室。
服务端传送到客户端:
//当前用户
socket.emit("msg(信息传送标识)",{...data})
//其他用户
socket.broadcast.emit("msg",{...data})
3、客户端接受消息。
socket.on("msg",({...data})=>{
//这里存放基于数据渲染页面的逻辑
})
4、服务端接受消息,再统一传送给所有用户的逻辑
一次握手io.on('connection', (socket) => {//存放所有关于消息传递的功能}
connection是固定的API,就是建立连接用的。
对应的是socket.on('disconnect',()=>{//存放的逻辑:当一个用户离开时,将他离开的信息播报给其他用户}
服务端一对多发送消息给所有的用户
socket.on('chatMessage',(msg)=>{
io.emit('message',{msg,...data});
}