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

爲了更好地測試效果，能夠開啓兩個控制檯，一個控制檯發送消息，另一個控制檯會跳出消息，至關於聊天的推送。