这段时间进了一个新的项目组，项目是用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. Maven配置中scope说明

    Maven环境搭建完成后,需要去pom.xml文件中配置相关使用的jar架包. 如上图,架包选定之后需要配置对应的scope属性,下面来简单说下这些属性选项的含义: 1. compile,缺省值,适用 ...

  2. ubuntu 编译oce Open CASCADE

    前期准备 1 安装cmake 最新版本 sudo apt-get install cmake 2 安装OpenGl Library 和OpenGL Utilities sudo apt-get ins ...

  3. Python静态网页爬虫相关知识

    想要开发一个简单的Python爬虫案例,并在Python3以上的环境下运行,那么需要掌握哪些知识才能完成一个简单的Python爬虫呢? 爬虫的架构实现 爬虫包括调度器,管理器,解析器,下载器和输出器. ...

  4. eclipse如何导入项目

    链接来自百度经验: 点击打开链接

  5. IIS 7.5 高并发参数配置

    IIS 7.5 高并发参数配置 由于之前使用的是默认配置,服务器最多只能处理5000个同时请求,对于高并发请求,参照文档设置10万并发 1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为 ...

  6. js中Dom对象的position属性

    首先应该明白什么是流?这个估计也很容易明白,我就不说了.顺便说下,float设置了这个属性就暂时脱离了流的存在,clear后才会到流里面. position:absolute| fixed | rel ...

  7. 看啦这么就别人的博客 我也来写一篇！ Object转换其他类型

    package com.sinitek.framework.util; import java.math.BigDecimal;import java.sql.Timestamp;import jav ...

  8. 摘要评注The Cathedral & The Bazaar

    2013年暑期买到这本书,距离其第一版已经有14年之久,而最早发布在互联网上的文章更是早在1997年.在我阅读的时候,很多事迹已经沉积为历史,很多预言已经成为现实.而这本书的意义却丝毫没有因此淡化,反 ...

  9. makefile 简单介绍

    使用与来源: makefile文件(可由./configure创建)被make命令读取,make 命令执行时,需要一个 Makefile 文件,以告诉 make 命令需要怎么样的去编译和链接程序. 功 ...

  10. Egit Patch

    Git为我们提供了Patch功能,Patch中包含了源码更改的描述,能够应用于其他Eclipse工作空间或者Git仓库.也就是说,可以将当前提交导出至其他分支或者项目中. 举个例子,项目A.B中使用了 ...