之前一直在讲理论玩,这次说点干货吧。
顺带说一下,那个从零单排 vue 系列,过些日子再写吧。尤神终究是尤神,一时半会儿也确实难以把 vue 整个模拟出来。
继续说正题。(这里需要一个 node 环境,电脑上
如果没有装 node 的话 … 查一下怎么装,
如果不知道怎么安装依赖包的话,也查一下,
如果不知道怎么运行 js 文件的话,也查一下)
我这里就直接使用 一个 名为 nodejs-webscoket 的工具包
1、首先创建一个 websocket 服务, 这里占用一下 3000 端口:
const ws = require('nodejs-websocket');
const wsServer = ws.createServer(function(res) {console.log('有一个新连接');
setTimeout(function(){res.sendText('hello')}, 1000);
})
wsServer.listen(3000, function(err){if(!err) console.log('创建成功');});
然后启动服务,启动服务之前记得先
npm install nodejs-websocket --save
不然会报错缺失依赖包
这时候可以在 浏览器的 console 控制台 输入
var connect1 = new WebSocket('ws://localhost: 3000');
var connect2 = new WebSocket('ws://localhost: 3000');
看到 node 的控制台打印了三行话
创建成功,有一个新连接,有一个新连接
这里就是创建成功了 ws 服务了。
2、然后就是前后端的交互。
刚刚的后台有一句
setTimeout(function(){res.sendText('hello')}, 1000);
这是后台给前端传的一个内容,但是因为前端并没有写接受方法,
所以 可以重新写一个 connect3 测一测 前后端交互。
var connect3 = new WebSocket('ws://localhost: 3000');
connect3.onmessage = function(res) {console.log(res);
}
如果写得没问题的话,一秒钟之后,浏览器控制台出来了一条消息。
刚刚说了后台给前端传消息了,再说下前端给后台传消息;
前端给后台传消息的方法叫做 send;
nodejs-websocket 的接受方法叫 on(‘text’)
这里重写一下 后台,给后台加点功能。
const ws = require('nodejs-websocket');
const wsServer = ws.createServer(function(res) {console.log('有一个新连接');
res.on('text', function(text) {console.log(text);
res.sendText('我收到你的消息' + text)
})
})
wsServer.listen(3000, function(err){if(!err) console.log('创建成功');});
然后重启 ws 服务器 … 就是重新运行一下这个 js
前端浏览器控制台 也重写一下按回车(刚刚后台重启了,这样相当于重新调一下接口)
var connect = new WebSocket('ws://localhost: 3000');
connect.onmessage = function(res) {console.log(res);
}
连接成功之后
浏览器控制台输入一句
connect.send('1234556')
这时候就看到后台给这边返回了一条消息 …. 这样基本的长连接功能就完成了。
然后就是给每个连接取一个自己的名字。
前端这边,每个连接都有名字,比如 connect, connect1, connect2。但是后台并没有明确的区分点。
所以这里前端链接 websocket 的时候,将 信息带进去,后台增加一个 url 包,解析 url,这里就不弄多少房间了,就一个 chatRoom 房间, 并且固定一下参数为 name。(懒得写判断)
重写一下后台
const ws = require('nodejs-websocket');
const url = require('url');
const wsRooms = {chatRoom:{}};// 用来接受房间
const wsServer = ws.createServer(function(conn) {var urlInfo = url.parse(conn.path, true);
wsRooms.chatRoom[urlInfo.query.name] = conn; // 给此 res 命名
console.log('有一个新连接');
console.log(wsRooms);
})
wsServer.listen(3000, function(err){if(!err) console.log('创建成功');});
这个时候前端浏览器输入
var connect = new WebSocket('ws://localhost:3000/chatRoom?name=hello');
connect.onmessage = function(res) {console.log(res);
}
后台的 wsRooms 已经将这个 对话连接 加入到 其 chatRoom 下面去了。并且取名为 hello
然后就到了最后一步了,聊天
刚刚 有实验是 前端 send 后台就给返回一个 ‘ 我收到了你的消息 ’
现在要变成 前端 send,后台 找被 send 的人,然后给那个那个人发送,send 的消息
因为上面已经给 每一个对话都命名了,所以 send 一个 user,再 send 一个 text , 后端解析后给这个 user 发送内就行。我就直接上代码了。
const ws = require('nodejs-websocket');
const url = require('url');
const wsRooms = {chatRoom:{}};// 用来接受房间
const wsServer = ws.createServer(function(res) {var urlInfo = url.parse(res.path, true);
wsRooms.chatRoom[urlInfo.query.name] = res; // 给此 res 命名
console.log('有一个新连接');
console.log(wsRooms);
res.on('text', function(res) {var data = JSON.parse(res);
var sender = data.name;
var text = data.text;
var message = {name: urlInfo.query.name, text: text};
wsRooms.chatRoom[sender].sendText(JSON.stringify(message));
})
})
wsServer.listen(3000, function(err){if(!err) console.log('创建成功');});
然后浏览器控制台
var hello = new WebSocket('ws://localhost:3000/chatRoom?name=hello');
hello.onmessage = function(res) {console.log(res);
}
var lolo = new WebSocket('ws://localhost:3000/chatRoom?name=lolo');
lolo.onmessage = function(res) {console.log(res);
}
链接成功之后,输入
hello.send(JSON.stringify({name:'lolo', text: 'hello lolo'}));
为了更好地测试效果,可以开启两个控制台,一个控制台发送消息,另外一个控制台会跳出消息,相当于聊天的推送。