node.js基于socket.io快速实现一个实时通讯应用(2)

io.of("/post").on("connection", function(socket) { socket.emit("new message", { mess: `这是post的命名空间` }); }); io.of("/get").on("connection", function(socket) { socket.emit("new message", { mess: `这是get的命名空间` }); });

客户端

// index.js const socket = io("ws://0.0.0.0:****/post"); socket.on("new message", function(data) { console.log('index',data); } //message.js const socket = io("ws://0.0.0.0:****/get"); socket.on("new message", function(data) { console.log('message',data); }

room

客户端

//可用于客户端进入房间; socket.join('room one'); //用于离开房间; socket.leave('room one');

服务端

io.sockets.on('connection',function(socket){ //提交者会被排除在外（即不会收到消息） socket.broadcast.to('room one').emit('new messages', data); // 向所有用户发送消息 io.sockets.to(data).emit("recive message", "hello,房间中的用户"); }

用socket.io实现一个实时接收信息的例子

终于来到应用的阶段啦，服务端用node.js模拟了服务端接口。以下的例子都在本地服务器中实现。

服务端

先来看看服务端，先来开启一个服务，安装express和socket.io

安装依赖

npm install --Dev express npm install --Dev socket.io

构建node服务器

let app = require("express")(); let http = require("http").createServer(handler); let io = require("socket.io")(http); let fs = require("fs"); http.listen(port); //port:输入需要的端口号 function handler(req, res) { fs.readFile(__dirname + "/index.html", function(err, data) { if (err) { res.writeHead(500); return res.end("Error loading index.html"); } res.writeHead(200); res.end(data); }); } io.on("connection", function(socket) { console.log('连接成功'); //连接成功之后发送消息 socket.emit("new message", { mess: `初始消息` }); });

客户端

核心代码——index.html（向服务端发送数据）

<div>发送信息</div> <input placeholder="请输入要发送的信息" /> <button>发送</button>

// 接收到服务端传来的name匹配的消息 socket.on("new message", function(data) { console.log(data); }); function postMessage() { socket.emit("recive message", { message: content, time: new Date() }); messList.push({ message: content, time: new Date() }); }

核心代码——message.html（从服务端接收数据）

socket.on("new message", function(data) { console.log(data); });

效果

实时通讯效果

客户端全部断开连接

某客户端断开连接

namespace应用

加入房间

离开房间

框架中的应用

npm install socket.io-client

const socket = require('socket.io-client')('http://localhost:port'); componentDidMount() { socket.on('login', (data) => { console.log(data) }); socket.on('add user', (data) => { console.log(data) }); socket.on('new message', (data) => { console.log(data) }); }

分析webSocket协议

Headers

请求包

Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Cache-Control: no-cache Connection: Upgrade Cookie: MEIQIA_VISIT_ID=1IcBRlE1mZhdVi1dEFNtGNAfjyG; token=0b81ffd758ea4a33e7724d9c67efbb26; io=ouI5Vqe7_WnIHlKnAAAG Host: 0.0.0.0:2699 Origin: :5500 Pragma: no-cache Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits Sec-WebSocket-Key: PJS0iPLxrL0ueNPoAFUSiA== Sec-WebSocket-Version: 13 Upgrade: websocket User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

请求包说明：

必须是有效的http request 格式；

HTTP request method 必须是GET，协议应不小于1.1 如： Get / HTTP/1.1；

必须包括Upgrade头域，并且其值为“websocket”，用于告诉服务器此连接需要升级到websocket;

必须包括”Connection” 头域，并且其值为“Upgrade”;

必须包括”Sec-WebSocket-Key”头域，其值采用base64编码的随机16字节长的字符序列;

如果请求来自浏览器客户端，还必须包括Origin头域 。 该头域用于防止未授权的跨域脚本攻击，服务器可以从Origin决定是否接受该WebSocket连接;

必须包括“Sec-webSocket-Version”头域，是当前使用协议的版本号，当前值必须是13;

可能包括“Sec-WebSocket-Protocol”，表示client（应用程序）支持的协议列表，server选择一个或者没有可接受的协议响应之;

可能包括“Sec-WebSocket-Extensions”， 协议扩展， 某类协议可能支持多个扩展，通过它可以实现协议增强;

可能包括任意其他域，如cookie.

应答包

应答包说明：

Connection: Upgrade Sec-WebSocket-Accept: I4jyFwm0r1J8lrnD3yN+EvxTABQ= Sec-WebSocket-Extensions: permessage-deflate Upgrade: websocket

必须包括Upgrade头域，并且其值为“websocket”;

必须包括Connection头域，并且其值为“Upgrade”;