这段时间进了一个新的项目组，项目是用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. python 笔记1：安装python；eclipse中安装配置pydev

    1  下载安装python. 官网:https://www.python.org/downloads/     根据自己的操作系统选择需要的版本下载并安装. 我的电脑操作系统windows xp的,只 ...

  2. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  3. 安装生物信息学软件-R

    主要参考http://www.3fwork.com/b211/000091MYM021616/ Step 1 : sudo gedit /etc/apt/sources.list 添加到末尾 deb ...

  4. Linux Centos7下安装Python

    1.查看是否已经安装Python Centos7默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用python -V命令查看一下是否安装Pytho ...

  5. Spring利器之包扫描器

    在学习Spring这门技术中为了大大减少applicationContext.xml配置的代码量于是有了包扫描器. 闲话不多说我们马上来实现一下吧 示例架构如下: 第一步我们先来修改我们的配置appl ...

  6. Caffe proto閱讀

    --------------------------------------------------------------------------------- 1.Data Layer sourc ...

  7. git error

    一,今天在上传代码时出错: $ git push -u origin mastererror: The requested URL returned error: 403 Forbidden whil ...

  8. Spring MVC 拦截 js,css,png 等资源

    springMVC的<mvc:resources mapping="***" location="***">标签是在spring3.0.4出现的,主 ...

  9. 网页左上角图标 favicon.ico

    显示网页左上角标志图标 <link rel="shortcut icon" type="image/x-icon" href="images/f ...

  10. Extjs各版本的下载链接

    Extjs的版本繁多,本文收集了Extjs各个版本的下载链接,包括官网和非官网的,以及各种汉化版api,欢迎大家下载分享. Extjs最新版下载链接:http://www.sencha.com/pro ...