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

HollisChuang 发布于2019-08-26 10:14 / 1087人阅读

摘要：用来接受房间给此命名有一个新连接创建成功然后浏览器控制台链接成功之后，输入为了更好地测试效果，可以开启两个控制台，一个控制台发送消息，另外一个控制台会跳出消息，相当于聊天的推送。

之前一直在讲理论玩，这次说点干货吧。
顺带说一下，那个从零单排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教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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