这段时间进了一个新的项目组，项目是用Appcan来做一个跨平台的移动运维系统，其中前台和后台之间本来是打算用WebSocket来实现的，但写好了示例后发现android不支持WebSocket，大为受挫。后在园子里看到用socket.io可以代替WebSocket，然而对于我这样JS都没学全的来说有多了一块要啃的砖头了，没奈何还是要硬着头皮上。下面是我用node.js和socket.io做的一个简易的Web聊天室，不过只支持局域网。由于也是刚学这些所以做的不好就请见谅了。

以下是服务端代码index.js代码

 var module = require("./server");

 var chatroom = new module.Chatroom();

 chatroom.setConfig({"Port":8080, "IP":"192.168.2.105"});

 chatroom.startUp();

index.js

服务端server.js代码

 exports.Chatroom = function()

 {

     var m_config = {"Port":8080, "IP":"127.0.0.1"};

     this.users = new Array();

     this.setConfig = function(cfg)

     {

         for(var x in cfg)

         {

             m_config[x] = cfg[x];

         }

     }

     this.startUp = function()

     {

         io = require('socket.io').listen(m_config.Port, m_config.IP);

         io.sockets.on('connection', function(socket){

             console.log('new client connect');

             socket.on('disconnection', function(data){

             });

             socket.on('message', function(data){

                 var msg = JSON.parse(data);

                 socket.broadcast.emit("message", data);

             });

             socket.on('login', function(data){

                 var user = JSON.parse(data);

                 console.log(user.UserName + " log in");

                 socket.broadcast.emit("message", JSON.stringify({"Type":"login", "UserName":user.UserName}));

             });

             socket.on('logoff', function(data){

                 var user = JSON.parse(data);

                 socket.broadcast.emit("message", JSON.stringify({"Type":"logoff", "UserName":user.UserName}));

                 console.log(user.UserName + " log off");

             });

         });

         console.log('chatroom start up!');

     }

 }

server.js

客户端index.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>Chatroom</title>

         <link rel="stylesheet" href="style.css">

         <script src="socket.io.js"></script>

         <script>

             var socket;

             function onConnect_Click()

             {

                 if(txtUserName.value === "")

                 {

                     alert("请输入用户名");

                     return;

                 }

                 socket = io.connect("http://127.0.0.1:8080");

                 socket.on('connect', function(){

                     socket.emit('login', JSON.stringify({

                         'UserName' : txtUserName.value

                     }));

                 });

                 socket.on('message', function(data){

                     var msg = JSON.parse(data);

                     var display = document.getElementById("message-log");

                     switch(msg.Type)

                     {

                         case "login":

                             txtMsgLog.value += msg.UserName+"上线\r\n";

                             break;

                         case "logoff":

                             txtMsgLog.value += msg.UserName+"离线\r\n";

                             break;

                         case "message":

                             txtMsgLog.value += msg.UserName + ":" + msg.Message + "\r\n";

                             break;

                     }

                 });

             }

             function onSend_Click()

             {

                 var data = JSON.stringify({"Type":"message", "UserName":txtUserName.value, "Message":txtMsgInput.value});

                 socket.emit("message", data);

                 txtMsgLog.value += txtUserName.value + ":" + txtMsgInput.value + "\r\n";

                 txtMsgInput.value = "";

             }

             function onCancel_Click()

             {

                 txtMsgInput.value = "";

             }

             function onDisconnect_Click()

             {

                 socket.emit('logoff', JSON.stringify({

                         'UserName' : txtUserName.value

                     }));

             }

         </script>

     </head>

     <body>

         <div id="page">

             <div id="content">

                 <div id="message-log">

                     <textarea id="txtMsgLog"></textarea>

                 </div>

                 <div id="message-input">

                     <textarea id="txtMsgInput"></textarea>

                     <div id="message-buttons">

                         <label for="txtUserName">用户姓名</label>

                         <input type="text" id="txtUserName" size="20">

                         <button id="btnConnect" onClick="onConnect_Click()">连接</button>

                         <button id="btnDisconnect" onClick="onDisconnect_Click()">断开</button>

                         <button id="btnSend" onClick="onSend_Click()">发送</button>

                         <button id="btnCancel" onClick="onCancel_Click()">取消</button>

                     </div>

                 </div>

             </div>

         </div>

     </body>

 </html>

index.html

客户端样式文件style.css

 html, body, div

 {

     margin:;

     padding:;

 }

 #page

 {

     width:600px;

     height:600px;

     margin-left:auto;

     margin-right:auto;

     border:1px solid green;

 }

 #content

 {

     width:100%;

     height:100%;

 }

 #message-log

 {

     width:580px;

     height:400px;

     margin:10px;

     text-align:center;

     border:1px solid green;

 }

 #txtMsgLog

 {

     width:570px;

     height:390px;

     text-align:left;

 }

 #message-input

 {

     width:580px;

     height:160px;

     margin:10px;

     border:1px solid green;

     text-align:center;

 }

 #txtMsgInput

 {

     width:570px;

     margin:;

     height:100px;

     text-align:left;

 }

 #message-buttons

 {

     width:580px;

     margin:10px;

 }

 #right-content

 {

     width:200px;

     height:600px;

     float:right;

     border:1px solid green;

 }

 #msg-user

 {

     color:red;

 }

 #msg-content

 {

     color:green;

 }

style.css

基于Node.js+socket.IO创建的Web聊天室的更多相关文章

  1. 基于node.js+socket.io+html5实现的斗地主游戏（1）概述

    一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...

  2. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  3. （转）使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  4. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  5. 转载：node.js socket.io

    本文转自:http://www.xiaocai.name/post/cf1f9_7b6507  学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...

  6. 利用socket.io+nodejs打造简单聊天室

    代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...

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

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

  8. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

  9. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

随机推荐

  1. IT公司100题-32-交换元素，使数组差最小

    问题描述: 有两个整数序列a, b,大小都为n, 序列元素的值任意整数,无序. 要求:通过交换a, b 中的元素,使得sum(a)-sum(b),差最小. 例如: var a=[80, 40, 60, ...

  2. Jmeter—6 CSV Data Set Config 通过文件导入数据

    线程组循环次数大于1的时候,请求里每次提交的数据都相同.有的系统限制了不能提交相同数据,我们通过 CSV Data Set Config 加载csv文件数据. 1 创建一个文本文件,输入参数值保存为. ...

  3. vim常用命令总结 （转）

    vim 选择文本,删除,复制,粘贴   文本的选择,对于编辑器来说,是很基本的东西,也经常被用到,总结如下: v    从光标当前位置开始,光标所经过的地方会被选中,再按一下v结束. V    从光标 ...

  4. Linq一 基础知识

    1.什么是Linq 他是VS2008(.net framework 3.5)之后一项重大的突破 全程Lnaguage Integrated Query,可以成为数据迭代器. 主要有以下5大块组成: L ...

  5. c++语法随身记

    1.memset是计算机中C/C++语言函数.将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASCII值, 第一个值为指定的内存地址,块的大小由第三个参数指定,这个函数通常为新申请的 ...

  6. Java-->打包发送信息(UDP协议)

    --> 好像UDP 协议没有TCP 协议应用得那么广泛 --> UdpSender 类定义一个发送端(快递公司) package com.dragon.java.udpdatagram; ...

  7. 根据 url请求数据

    public static JSONObject getJsonFromUrl(String url){ CloseableHttpClient httpClient = HttpClients.cr ...

  8. Sublime Text 2 中文 GBK 规范的配置 暨 解决中文乱码问题 简述

    首先通过 Package Control 安装 ConverToUTF8 插件,但是每次新建一个文本后并不是默认使用 GBK,要设置默认使用 GBK,请继续看,然后我们 Ctrl + O 打开文件,在 ...

  9. 【转载】AngularJs 指令directive之controller，link，compile

    关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...

  10. CE选择目录对话框（转）

    本文转载于http://blog.163.com/zhaojun_xf/blog/static/30050580201132221118479/ 在Wince下要打开目录对话框需要调用函数SHBrow ...