这段时间进了一个新的项目组，项目是用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. java中判断一个字符串是否“都为数字”和“是否包含数字”和“截取数字”

    在javascript中有一个方法isDigit()使用来判断一个字符串是否都是数字,在java的字符串处理方法中没有这样的方法,觉得常常需要用到,于是上网搜了一下,整理出了两个用正则表达式匹配的判断 ...

  2. golang——slice使用摘要

    1.slice因capacity不足而重新分配的underlying array与原本的array空间是断裂的,就是说这是原本指向的空间没变,如下 arr := [...]int{1, 2, 3, 4 ...

  3. Java中的HashSet和TreeSet

    1:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法:hashCode()和eq ...

  4. Android中build target，minSdkVersion，targetSdkVersion，maxSdkVersion概念区分 （转载）

    本文参考了谷歌开发者文档:http://developer.android.com/guide/topics/manifest/uses-sdk-element.html#provisional 如果 ...

  5. CSS第一天总结

    CSS是层叠样式表,其作用在我看来就是统一一个或多个元素或者ID.class等的属性,CSS可以定义的属性非常多,一个好看的网页离不开CSS的修饰. CSS简而言之就是三个部分:选择符.属性.属性值. ...

  6. c语言基础

  7. 传智播客JavaWeb day03

    ServletContext 这堂课主要讲ServletContext这个web域(可以看得见范围的)对象,web在启动的时候会创建唯一的ServletContext域对象. 作用:1.用来web域共 ...

  8. 避免每次输入bundler Exec命令

    bundle在ruby的世界里是个好东西,它可以用来管理应用程序的依赖库.它能自动的下载和安装指定的gem,也可以随时更新指定的gem. rvm则是一个命令行工具,能帮助你轻松的安装,管理多个ruby ...

  9. .NET 强引用和弱引用

    一:什么是弱引用 了解弱引用之前,先了解一下什么是强引用 例如 : Object obj=new Object();     就是一个强引用,内存分配一份空间给用以存储Object数据,这块内存有一个 ...

  10. C# WinForm 应用程序 开启Console窗口

    /********************************************************************************* * C# WinForm 应用程序 ...