使用Node作一个简单的聊天室(附webSocket教程)

以前一直在讲理论玩，此次说点干货吧。
顺带说一下，那个从零单排vue系列，过些日子再写吧。尤神终究是尤神，一时半会儿也确实难以把vue整个模拟出来。

继续说正题。（这里须要一个node环境，电脑上
若是没有装node的话...查一下怎么装,
若是不知道怎么安装依赖包的话，也查一下，
若是不知道怎么运行js文件的话，也查一下）

我这里就直接使用 一个 名为 nodejs-webscoket 的工具包

一、首先建立一个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服务了。

二、而后就是先后端的交互。

刚刚的后台有一句

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'}));

为了更好地测试效果，能够开启两个控制台，一个控制台发送消息，另一个控制台会跳出消息，至关于聊天的推送。