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

HollisChuang 發布于2019-08-26 10:14 / 1092人閱讀

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

之前一直在講理論玩，這次說點干貨吧。
順帶說一下，那個從零單排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"}));

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

GPU云服務器云服務器簡單的php聊天簡單的php聊天系統 websocket實現聊天室簡單的python教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105841.html

手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

nemo 2019-08-20 12:34 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

leiyi 2019-08-01 16:00 評論0 收藏0
Node.js+WebSocket創建簡單聊天室

摘要：好的，這樣以來我們的前期準備工作就已經完成了，下面我們來搭建聊天室對應的客戶端和服務器端。 websocket簡介 websocket其實HTML中新增加的內容，其本質還是一種網絡通信協議，以下是websocket的一些特點：（1）因為連接在端口80（ws）或者443（wss）上創建，與HTTP使用的端口相同，幾乎所有的防火墻都不會阻塞WebSocket鏈接（2）因...

cppprimer 2019-08-22 11:09 評論0 收藏0
Node.js+WebSocket創建簡單聊天室

摘要：好的，這樣以來我們的前期準備工作就已經完成了，下面我們來搭建聊天室對應的客戶端和服務器端。 websocket簡介 websocket其實HTML中新增加的內容，其本質還是一種網絡通信協議，以下是websocket的一些特點：（1）因為連接在端口80（ws）或者443（wss）上創建，與HTTP使用的端口相同，幾乎所有的防火墻都不會阻塞WebSocket鏈接（2）因...

Seay 2019-08-06 13:26 評論0 收藏0
前端每周清單第 38 期: Node 9 發布，Kotlin 與 React，Netflix 架構解

摘要：發布本周正式發布，包含了一系列的特性提升與問題修復，同時也在不斷致力于將打造地更為輕巧與高性能。當然，姜振勇老師還會介紹的多種服務，包括大數據網絡和安全，展現彈性安全和高可擴展性的全方位能力。 showImg(http://upload-images.jianshu.io/upload_images/1647496-2ce7598e6987d9af.jpg?imageMogr2/aut...

Carbs 2019-08-21 17:29 評論0 收藏0