(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com)

websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可以用于任意的客户端和服务器程序,

把上一个demo改装一下,变成一个简易聊天室,在不同的页面之间可以收到彼此send的内容,并且新增了上线提示和下线提示。如果新打开一个localhost:8080页面,我们就认为有新人加入,如果关闭了页面,就认为有人下线啦。

首先安装一下websocket,方法很简单啦,在命令行里输入 npm install websocket

页面只有一个chat.html,看一下前端页面的js核心代码

var wsClient = new WebSocket("ws://localhost:9090","chat-protocol");创建一个实例,这个端口,随便起,从0~65535理论上都行,但是3000之内的最好不要用,因为很多软件都有自己约定俗成的端口使用情况了。因为http server用了8080,所以WebSocketServer随手用了9090
wsClient.onopen = function(){
wsClient.send('____conn____');这就是接头暗号,类似于天王盖地虎,是初始化消息
}
wsClient.onmessage = function(msg){监听消息
console.log(msg);
if(msg.data){
var data = JSON.parse(msg.data);转化成json形式
var txt = document.querySelector("#chatRoom").value;
txt += "\n"+data.nickname+"说:"+data.message;
document.querySelector("#chatRoom").value = txt;显示在页面
}
}

以下是server端核心代码

var http = require("http");
var WebSocketServer = require("websocket").server;
var url = require("url");
var resource = require("./resource.js") 处理resource的部分拿出来了,复用代码块

http.createServer(function(req, res){
var oUrl = url.parse(req.url, true);
if(oUrl.pathname == '/favicon.ico'){     给页面地址栏加了个小图标
resource.getFile(oUrl.pathname,res);
}
else {
resource.getFile("/chat.html", res);  这里就是获取的前端的html页面
}
}).listen(8080);

var wsHttpServer = http.createServer(function(req,res){
res.writeHead(403);这个httpServer是给websocket用的,所以对于普通的http请求就返回403,这是个websocket server,普通http请求不受理,也可以返回404,或者其他的页面
res.end("NOT AUTH");
}).listen(9090);

var wsServer = new WebSocketServer({httpServer:wsHttpServer})这里new了一个新的WebSocketServer对象

var connections = [];

function broadcast(content) {  广播出去喽,每个页面都能收到
for(var i=0;i<connections.length;i++){
if(connections[i].connected)
connections[i].send(content);
}
}
wsServer.on('request',function(req){受理请求
var conn = req.accept("chat-protocol");
broadcast(JSON.stringify({nickname:'系统',message:'有人上线了'}));
var index = connections.push(conn)-1;
conn.on('message',function(msg){
if(msg.type == 'utf8'){
if(msg.utf8Data != '____conn____'){对一下暗号
var msg = JSON.parse(msg.utf8Data);
var content = JSON.stringify({nickname:msg.nickname,message:msg.message});
broadcast(content);
}
}
});
conn.on('close',function(){
connections.splice(index,1);
broadcast(JSON.stringify({nickname:'系统',message:"有人下线了"}))
});
});

写完启动下,在命令行输入node  chat_server.js,打开多个localhost:8080就可以欢乐的聊天了。

node.js+websocket实现简易聊天室的更多相关文章

  1. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  2. node+websocket创建简易聊天室

    关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...

  3. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  4. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  5. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  6. WebSocket实现简易聊天室

    前台页面: <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  7. 小案例-WebSocket实现简易聊天室

    前言 在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的"请求-问答模式"这一局限,实现了服务器主动向客户端传送数据.而本章将通过一种在单个TCP连接上进行全双工通信的协议 ...

  8. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...

  9. Servlet WebSocket的简易聊天室

    添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...

随机推荐

  1. Java技术路线图

    在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样我们清楚的知道我们大概处于那个阶段和水平. Java程序员 高级特性 反射.泛型. ...

  2. [转载]NSString中判断中文,英文,数字

    曾有需求做个用户名中非法字符的判断,要求是只能输入中英文和数字,其他字符一律非法,故写了下边一个程序mark一下吧~~ NSString *testString = @"春1mianBU觉晓 ...

  3. 每天一个linux命令(48):netstat命令

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  4. DML语言练习,数据增删改查,复制清空表

    Connected Connected as TEST@ORCL SQL> select * from t_hq_bm; BUMBM BUMMC DIANH ---------- ------- ...

  5. Java设计模式-中介者模式(Mediator)

    中介者模式也是用来降低类类之间的耦合的,因为如果类类之间有依赖关系的话,不利于功能的拓展和维护,因为只要修改一个对象,其它关联的对象都得进行修改.如果使用中介者模式,只需关心和Mediator类的关系 ...

  6. 【HDU 2955】Robberies(DP)

    题意是给你抢劫每个银行可获得的钱m和被抓的概率p,求被抓的概率小于P,最多能抢多少钱.01背包问题,体积是m,价值是p.被抓的概率不是简单相加,而应该是1−Π(1−p[i])DP:dp[i]表示抢到i ...

  7. 【Aizu 2305】Beautiful Currency

    题 题意 给你n个货币价格,然后通过调整一些货币的大小,使得所有比自己小的货币都是该货币的约数,调整前第 i 货币为a,调整后为b 那么变化率为 ri=|a-b|/a ,总变化率为max(ri).求最 ...

  8. ubuntu自动关闭屏幕显示器

    在程序中系统调用如下两个命令,可以关闭显示器. 1,xset dpms force off 2,system("vbetool dpms off"); 因为应用要在ubuntu开机 ...

  9. php抓取页面的几种方式

    在做一些天气预报或者RSS订阅的程序时,往往 需要抓取非本地文件,一般情况下都是利用php模拟浏览器的访问,通过http请求访问url地址, 然后得到html源代码或者xml数据,得到数据我们不能直接 ...

  10. 汇文Libsys图书管理系统全版本权限绕过+getshell

    由于一个很低级的代码错误,导致可以登录Libsys任意图书系统后台,并且由于代码未做过滤可直接getshell. 该图书管理系统的用户量很大,全国很大一部分院校都在使用此系统.经测试3.5-5.0版本 ...