zoukankan      html  css  js  c++  java
  • node.js+websocket实现简易聊天室

     (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 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 += " "+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就可以欢乐的聊天了。

  • 相关阅读:
    批处理压缩iis日志
    centos6 安装wkhtmltopdf 生成pdf
    SpringMVC
    MVC的了解
    Eclipse创建SpringMVC,Spring, Hibernate项目
    mysql表基本查询
    JVM垃圾回收机制与内存回收
    mysql外键(Foreign Key)的使用
    MyEclipse做的项目改成eclipse能用的
    invalid location of tag 解决办法
  • 原文地址:https://www.cnblogs.com/iwangzheng/p/3578014.html
Copyright © 2011-2022 走看看