使用Node做一個(gè)簡(jiǎn)單的聊天室(附webSocket教程)

HollisChuang 發(fā)布于2019-08-26 10:14 / 1098人閱讀

摘要：用來(lái)接受房間給此命名有一個(gè)新連接創(chuàng)建成功然后瀏覽器控制臺(tái)鏈接成功之后，輸入為了更好地測(cè)試效果，可以開(kāi)啟兩個(gè)控制臺(tái)，一個(gè)控制臺(tái)發(fā)送消息，另外一個(gè)控制臺(tái)會(huì)跳出消息，相當(dāng)于聊天的推送。

之前一直在講理論玩，這次說(shuō)點(diǎn)干貨吧。
順帶說(shuō)一下，那個(gè)從零單排vue系列，過(guò)些日子再寫吧。尤神終究是尤神，一時(shí)半會(huì)兒也確實(shí)難以把vue整個(gè)模擬出來(lái)。

繼續(xù)說(shuō)正題。（這里需要一個(gè)node環(huán)境，電腦上
如果沒(méi)有裝node的話...查一下怎么裝,
如果不知道怎么安裝依賴包的話，也查一下，
如果不知道怎么運(yùn)行js文件的話，也查一下）

我這里就直接使用一個(gè) 名為 nodejs-webscoket 的工具包

1、首先創(chuàng)建一個(gè)websocket 服務(wù),這里占用一下3000端口：

const ws = require("nodejs-websocket");

const wsServer = ws.createServer(function(res) {
    console.log("有一個(gè)新連接");
    setTimeout(function(){res.sendText("hello")}, 1000);
})

wsServer.listen(3000, function(err){if(!err) console.log("創(chuàng)建成功");});

然后啟動(dòng)服務(wù)，啟動(dòng)服務(wù)之前記得先
npm install  nodejs-websocket --save
不然會(huì)報(bào)錯(cuò)缺失依賴包

這時(shí)候可以在瀏覽器的 console 控制臺(tái) 輸入

var connect1 = new WebSocket("ws://localhost: 3000");
var connect2 = new WebSocket("ws://localhost: 3000");

看到node的控制臺(tái)打印了三行話
創(chuàng)建成功，有一個(gè)新連接，有一個(gè)新連接

這里就是創(chuàng)建成功了ws服務(wù)了。

2、然后就是前后端的交互。

剛剛的后臺(tái)有一句

setTimeout(function(){res.sendText("hello")}, 1000);

這是后臺(tái)給前端傳的一個(gè)內(nèi)容，但是因?yàn)榍岸瞬](méi)有寫接受方法，

所以可以重新寫一個(gè)connect3 測(cè)一測(cè) 前后端交互。

    var connect3 = new WebSocket("ws://localhost: 3000");
    connect3.onmessage = function(res) {
        console.log(res);
    }

如果寫得沒(méi)問(wèn)題的話，一秒鐘之后，瀏覽器控制臺(tái)出來(lái)了一條消息。

剛剛說(shuō)了后臺(tái)給前端傳消息了，再說(shuō)下前端給后臺(tái)傳消息；
前端給后臺(tái)傳消息的方法叫做 send;
nodejs-websocket 的接受方法叫 on("text")
這里重寫一下后臺(tái)，給后臺(tái)加點(diǎn)功能。

const ws = require("nodejs-websocket");

const wsServer = ws.createServer(function(res) {
    console.log("有一個(gè)新連接");
    res.on("text", function(text) {
        console.log(text);
        res.sendText("我收到你的消息" + text)
    })
})

wsServer.listen(3000, function(err){if(!err) console.log("創(chuàng)建成功");});

然后重啟ws服務(wù)器...就是重新運(yùn)行一下這個(gè)js

前端瀏覽器控制臺(tái) 也重寫一下按回車（剛剛后臺(tái)重啟了，這樣相當(dāng)于重新調(diào)一下接口）

    var connect = new WebSocket("ws://localhost: 3000");
    connect.onmessage = function(res) {
        console.log(res);
    }

連接成功之后
瀏覽器控制臺(tái)輸入一句

  connect.send("1234556")

這時(shí)候就看到后臺(tái)給這邊返回了一條消息....這樣基本的長(zhǎng)連接功能就完成了。

然后就是給每個(gè)連接取一個(gè)自己的名字。

前端這邊，每個(gè)連接都有名字，比如 connect, connect1, connect2。但是后臺(tái)并沒(méi)有明確的區(qū)分點(diǎn)。
所以這里前端鏈接websocket 的時(shí)候，將信息帶進(jìn)去，后臺(tái)增加一個(gè) url 包，解析url，這里就不弄多少房間了，就一個(gè)chatRoom 房間, 并且固定一下參數(shù)為name。(懶得寫判斷)
重寫一下后臺(tái)

const ws = require("nodejs-websocket");
const url = require("url");
const wsRooms = {chatRoom:{}};// 用來(lái)接受房間

const wsServer = ws.createServer(function(conn) {
    var urlInfo = url.parse(conn.path, true);
    wsRooms.chatRoom[urlInfo.query.name] = conn; // 給此 res 命名
    console.log("有一個(gè)新連接");
    console.log(wsRooms);
})

wsServer.listen(3000, function(err){if(!err) console.log("創(chuàng)建成功");});

這個(gè)時(shí)候前端瀏覽器輸入

var connect = new WebSocket("ws://localhost:3000/chatRoom?name=hello");
    connect.onmessage = function(res) {
        console.log(res);
    }

后臺(tái)的wsRooms已經(jīng)將這個(gè) 對(duì)話連接加入到其 chatRoom 下面去了。并且取名為hello

然后就到了最后一步了，聊天
剛剛有實(shí)驗(yàn)是前端send 后臺(tái)就給返回一個(gè) "我收到了你的消息"
現(xiàn)在要變成前端 send，后臺(tái) 找被 send 的人，然后給那個(gè)那個(gè)人發(fā)送，send 的消息

因?yàn)樯厦嬉呀?jīng)給每一個(gè)對(duì)話都命名了，所以send一個(gè) user，再send 一個(gè) text ,后端解析后給這個(gè)user發(fā)送內(nèi)就行。我就直接上代碼了。

const ws = require("nodejs-websocket");
const url = require("url");
const wsRooms = {chatRoom:{}};// 用來(lái)接受房間

const wsServer = ws.createServer(function(res) {
    var urlInfo = url.parse(res.path, true);
    wsRooms.chatRoom[urlInfo.query.name] = res; // 給此 res 命名
    console.log("有一個(gè)新連接");
    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("創(chuàng)建成功");});

然后瀏覽器控制臺(tái)

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

為了更好地測(cè)試效果，可以開(kāi)啟兩個(gè)控制臺(tái)，一個(gè)控制臺(tái)發(fā)送消息，另外一個(gè)控制臺(tái)會(huì)跳出消息，相當(dāng)于聊天的推送。

GPU云服務(wù)器云服務(wù)器簡(jiǎn)單的php聊天簡(jiǎn)單的php聊天系統(tǒng) websocket實(shí)現(xiàn)聊天室簡(jiǎn)單的python教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105841.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

HollisChuang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

AB32VG1 按鍵控制LED

閱讀 1905·2021-11-23 09:51
11月最新編程排行榜出爐，這個(gè)語(yǔ)言超過(guò)了C蟬聯(lián)榜首~

閱讀 1549·2021-11-19 09:40
DediPath：全場(chǎng)VPS和hybrid混合服務(wù)器5折，美國(guó)圣何塞/西雅圖機(jī)房，$10/年起

閱讀 3221·2021-11-11 11:01
PHP+MySQL實(shí)現(xiàn)簡(jiǎn)單的登錄注冊(cè)案例（詳細(xì)版附代碼）

閱讀 1120·2021-09-27 13:34
獨(dú)享云虛擬主機(jī)怎么用-云主機(jī)與虛擬主機(jī)有什么區(qū)別？

閱讀 1852·2021-09-22 15:56
SASS學(xué)習(xí)記錄

閱讀 2136·2019-08-30 15:52
CSS基礎(chǔ)知識(shí)點(diǎn)整理

閱讀 1071·2019-08-30 14:13
前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

閱讀 3487·2019-08-30 14:10

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用Node做一個(gè)簡(jiǎn)單的聊天室(附webSocket教程)

相關(guān)文章

手把手教你擼一個(gè)網(wǎng)頁(yè)聊天室

手把手教你擼一個(gè)網(wǎng)頁(yè)聊天室

***Node.js+WebSocket創(chuàng)建簡(jiǎn)單聊天室***

***Node.js+WebSocket創(chuàng)建簡(jiǎn)單聊天室***

**前端每周清單第 38 期: Node 9 發(fā)布，Kotlin 與 React，Netflix 架構(gòu)解**

發(fā)表評(píng)論

0條評(píng)論

HollisChuang

男|高級(jí)講師

TA的文章

AB32VG1 按鍵控制LED

11月最新編程排行榜出爐，這個(gè)語(yǔ)言超過(guò)了C蟬聯(lián)榜首~

DediPath：全場(chǎng)VPS和hybrid混合服務(wù)器5折，美國(guó)圣何塞/西雅圖機(jī)房，$10/年起

PHP+MySQL實(shí)現(xiàn)簡(jiǎn)單的登錄注冊(cè)案例（詳細(xì)版附代碼）

獨(dú)享云虛擬主機(jī)怎么用-云主機(jī)與虛擬主機(jī)有什么區(qū)別？

SASS學(xué)習(xí)記錄

CSS基礎(chǔ)知識(shí)點(diǎn)整理

前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用Node做一個(gè)簡(jiǎn)單的聊天室(附webSocket教程)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！