一、原生websocket
首先介绍一下实现即时通信方式，有如下三种：
1. 轮询Ajax——不停询问，浪费性能；
2.服务器响应流：服务器不关闭连接，一次响应，一直保持连接——资源有限；
3. 使用websocket——有兼容问题
websocket是HTML5中新推出的通信协议，是在原来http协议基础上进行升级的，属于长连接通信。
原来http协议为一问一答形式，先有请求才有响应的机制。而websocket其底层利用了TCP协议（客户端与服务器建立连接之后，便可以自由通信），服务器也可以主动发请求给客户端。
注：websocket只存在于前台，是html5带的一种东西。后台本就有socket
原生的websocket中：
- 客户端可用直接通过
new Websocket('ws://xxxx/')建立通讯，通过原生的一系列事件与方法来实现与服务端的沟通； - 服务端基于
net模块（实现TCP协议）+crypto模块（保证安全）来创建连接和监听通信数据； - 服务端原生的socket实现十分复杂，包括：
- 响应客户端的请求报文，从请求报文中拆分出连接的版本等基本信息判断是否需要响应；
- 从请求报文中解析出掩码并根据掩码回写响应报文；
- 最复杂的在于数据帧的解析，涉及到帧结构的拆分，数据的加密，二进制数据的读写等。
ws请求报文
websocket帧结构
总之，原生的websocket使用起来十分不便，在实际应用中，多使用第三方库。
二、中间件与第三方库
核心思想socket.io——交互方式可能通过websocket/轮询Ajax/服务器响应流实现：1.服务器可主动发数据到客户端；2.客户端可通过服务器向客户端发数据。
客户端：依赖socket.io-client
-
引入js文件
<script src = "/socket.io.js"></script> -
建立连接
const socket = io('[http://localhost:8888');](http://localhost:8888');/) -
监听事件
socket.on(eventName, data => {}); -
向服务器传递消息
socket.emit(name, value);
服务端：依赖koa-socket
-
引入IO并实例化对象
const IO = require("koa-socket"); const io = new IO(); -
io监管app
io.attach(app); -
声明事件
io.on(eventName, sock=> {}); -
接收客户端消息
io.on(name, ctx => {
//ctx.data就是前台发送的数据
ctx.socket.emit(name, value); //回应消息，name需要与前台对应
})
- 广播事件
- 广播事件
io.broadcast(name, value) - 私聊推送
app._io.to(usersId).emit(name, value) - 加入群组
ctx.socket.socket.join(id) - 群组推送
ctx.socket.socket.to(groupId).emit(name, value)
三、案例——简易聊天室
服务端：
const Koa = require("koa");
const static = require("koa-static");
const IO = require("koa-socket");
const app = new Koa();
//实例化socket.io对象
const io = new IO();
//io监管app
io.attach(app);
//模拟用户信息
let user = {};
//记录用户信息
io.on('user', ctx => {
//存储用户通信id
user[ctx.data.userName] = ctx.socket.id;
//添加分组信息
ctx.socket.socket.join(ctx.data.groupId);
})
io.on('msg', ctx => {
//获取客户端数据并广播
let {to, from, content, groupId} = ctx.data;
if(groupId == '0') { //公共消息则广播给所有人
io.broadcast('msg', {from, content});
} else if(to == 'all') { //群组消息则发送给整个群组
//向监管部分推送消息
ctx.socket.socket.to('0').emit('msg', {from: from, content});
//向群组成员推送消息
ctx.socket.socket.to(groupId).emit('msg', {from: from, content});
//向发起人推送消息
app._io.to(user[from]).emit('msg', {from: from, content});
} else { //私聊信息则只发给特定的人
let fromStr = from + '(私聊)';
//向发起人推送消息
app._io.to(user[from]).emit('msg', {from: fromStr, content});
//私人消息则仅仅发送给对应的人
app._io.to(user[to]).emit('msg', {from: fromStr, content});
}
})
//配置静态资源文件
app.use(static('./'));
//开启服务器
app.listen(8888, ()=>{
console.log('The server is running...');
})
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./socket.io.js" charset="utf-8"></script>
<style media="screen">
.chatroom {
display: none;
}
.myOwnMessage {
color: #205da1;
}
</style>
</head>
<body>
<!-- 用户信息设置窗口 -->
<div class="setting">
输入你的昵称：<input type="text" name="username">
选择加入的群聊组: <select class="groups" name="">
<option value="0">江湖</option>
<option value="1">魔法</option>
<option value="2">物理</option>
</select>
<button type="button" name="button" id="setName">提交</button>
</div>
<!-- 聊天区域 -->
<div class="chatroom">
<div class="info">
<span id="user">xxx</span>，您好！欢迎来到聊天室~
</div>
<!-- 信息列表 -->
<ul id="chatList">
</ul>
<!-- 信息输入区域 -->
<textarea id="content" name="content" rows="8" cols="80"></textarea>
<button type="button" id="submit" name="button">发送</button>
<button type="button" id="toBoss" name="button">私聊给老板</button>
</div>
</body>
<script type="text/javascript">
//建立连接
const socket = io('[http://localhost:8888');](http://localhost:8888');/)
//监听事件
socket.on('connect', data => {
console.log('连接上了!')
});
socket.on('disconnect', data => {
console.log('断开连接了!')
});
//获取元素
let oSubmit = document.getElementById('submit');
let oSubmitToBoss = document.getElementById('toBoss');
let oChat = document.getElementsByClassName('chatroom')[0];
let oSettingBox= document.getElementsByClassName('setting')[0];
let oSetName = document.getElementById('setName');
let oText = document.getElementById('content');
//记录用户名称与分组信息
let username, groupId;
//绑定设定昵称事件
oSetName.onclick = function () {
//获取昵称
userName = document.querySelectorAll('input[name="username"]')[0].value;
groupId = document.querySelectorAll('.groups')[0].value;
//隐藏昵称设置区域
this.parentNode.style.display = 'none';
//显示聊天区域并发送用户信息
socket.emit('user', {
userName, groupId
});
document.getElementById('user').innerHTML = userName;
oChat.style.display = 'block';
}
function sendMsg(toWho) {
//获取内容
let sContent = oText.value;
oText.value = "";
//发送通信数据
socket.emit('msg', {
to: toWho,
groupId: groupId,
from: userName,
content: sContent
});
}
//绑定事件，发送聊天信息
oSubmit.onclick = function () {
sendMsg('all');
}
//发送私聊信息
oSubmitToBoss.onclick = function () {
sendMsg('boss');
}
//监听服务器的广播
socket.on('msg', sock => {
let oUl = document.getElementById('chatList');
let oLi = document.createElement('li');
//判断是否为自己发送的消息，是则设置样式
if(sock.from.indexOf(userName) != -1) {
oLi.className = 'myOwnMessage';
}
oLi.innerHTML = `${sock.from}：${sock.content}`;
oUl.appendChild(oLi);
})
</script>
</html>
-
实现效果
聊天室效果
网友评论