使用Node做一個簡單的聊天室(附webSocket教程)

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

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

之前一直在講理論玩，這次說點干貨吧。
順帶說一下，那個從零單排vue系列，過些日子再寫吧。尤神終究是尤神，一時半會兒也確實難以把vue整個模擬出來。

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

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

1、首先創(chuàng)建一個websocket 服務(wù),這里占用一下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("創(chuàng)建成功");});

然后啟動服務(wù)，啟動服務(wù)之前記得先
npm install  nodejs-websocket --save
不然會報錯缺失依賴包

這時候可以在瀏覽器的 console 控制臺輸入

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

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

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

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

剛剛的后臺有一句

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

這是后臺給前端傳的一個內(nèi)容，但是因為前端并沒有寫接受方法，

所以可以重新寫一個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("創(chuàng)建成功");});

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

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

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

連接成功之后
瀏覽器控制臺輸入一句

  connect.send("1234556")

這時候就看到后臺給這邊返回了一條消息....這樣基本的長連接功能就完成了。

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

前端這邊，每個連接都有名字，比如 connect, connect1, connect2。但是后臺并沒有明確的區(qū)分點。
所以這里前端鏈接websocket 的時候，將信息帶進去，后臺增加一個 url 包，解析url，這里就不弄多少房間了，就一個chatRoom 房間, 并且固定一下參數(shù)為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("創(chuàng)建成功");});

這個時候前端瀏覽器輸入

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

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

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

因為上面已經(jīng)給每一個對話都命名了，所以send一個 user，再send 一個 text ,后端解析后給這個user發(fā)送內(nèi)就行。我就直接上代碼了。

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("創(chuàng)建成功");});

然后瀏覽器控制臺

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105841.html

發(fā)表評論

登陸后可評論

0條評論

HollisChuang

男|高級講師

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

TA的文章

AB32VG1 按鍵控制LED

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

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

閱讀 3266·2021-11-11 11:01
PHP+MySQL實現(xiàn)簡單的登錄注冊案例（詳細版附代碼）

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

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

閱讀 2192·2019-08-30 15:52
CSS基礎(chǔ)知識點整理

閱讀 1130·2019-08-30 14:13
前端面試題-漸進增強和優(yōu)雅降級

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

使用Node做一個簡單的聊天室(附webSocket教程)

相關(guān)文章

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

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

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

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

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

發(fā)表評論

0條評論

HollisChuang

男|高級講師

TA的文章

AB32VG1 按鍵控制LED

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

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

PHP+MySQL實現(xiàn)簡單的登錄注冊案例（詳細版附代碼）

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

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

CSS基礎(chǔ)知識點整理

前端面試題-漸進增強和優(yōu)雅降級

最新活動

資訊專欄INFORMATION COLUMN

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

使用Node做一個簡單的聊天室(附webSocket教程)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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