Socket.io在线聊天室

从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！

关于作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo：@Conan_Z
  • blog: http://blog.fens.me
  • email: [email protected]

转载请注明出处：
http://blog.fens.me/nodejs-socketio-chat/

前言

网络聊天室在web1.0的时代就出现了，但当时技术支持比较有限，大都是通过浏览器插件BHO，JavaApplet，Flash实现的。如今HTML5技术风起云涌，通过websocket实现的网络聊天室，被定义为websocket的第一个实验，就像Hello World一样的简单。

今天我也动手完成了这个实验，感觉真的很爽！

目录

  1. socket.io介绍
  2. 服务器端和客户端通信设计
  3. 服务器端实现
  4. 客户端实现
  5. 完整案例代码

1. socket.io介绍

socket.io一个是基于Nodejs架构体系的，支持websocket的协议用于时时通信的一个软件包。socket.io 给跨浏览器构建实时应用提供了完整的封装，socket.io完全由javascript实现。

基于Nodejs实现webscoket其他的框架，请参考文章：Nodejs实现websocket的4种方式

2. 服务器端和客户端通信设计

上图中client1 和 server 描述通信过程，client2描述对其他的客户端，通过广播进行消息通信。

  1. client1向server发起连接请求
  2. server接受client的连接
  3. client1输入登陆用户名
  4. server返回欢迎语
  5. server通过广播告诉其他在线的用户，client1已登陆
  6. client1发送聊天信息
  7. server返回聊天信息(可省略)
  8. server通过广播告诉其他在线的用户，client1的聊天消息
  9. client1关闭连接，退出登陆
  10. server通过广播告诉其他在线的用户，client1已退出

我们看一下测试截图：

  1. 左边: aaa 登陆
  2. 右边: bbb 登陆
  3. 左边: aaa 收到 bbb登陆欢迎消息
  4. aaa 和 bbb 实现对话
  5. 右边: bbb 刷新浏览自动退出
  6. 左边: aaa 收到 bbb的退出消息
  7. 右边: CCC 登陆
  8. 左边: aaa 收到 CCC 登陆欢迎消息
  9. aaa 和 CCC 实现对话

3. 服务器端实现

我们这里使用socket.io和express3的混合模式，让HTTP请求和WebSocket请求都使用3000端口。

服务器端实现，只有一个核心文件app.js。


//引入程序包
var express = require(‘express‘)
  , path = require(‘path‘)
  , app = express()
  , server = require(‘http‘).createServer(app)
  , io = require(‘socket.io‘).listen(server);

//设置日志级别
io.set(‘log level‘, 1); 

//WebSocket连接监听
io.on(‘connection‘, function (socket) {
  socket.emit(‘open‘);//通知客户端已连接

  // 打印握手信息
  // console.log(socket.handshake);

  // 构造客户端对象
  var client = {
    socket:socket,
    name:false,
    color:getColor()
  }

  // 对message事件的监听
  socket.on(‘message‘, function(msg){
    var obj = {time:getTime(),color:client.color};

    // 判断是不是第一次连接，以第一条消息作为用户名
    if(!client.name){
        client.name = msg;
        obj[‘text‘]=client.name;
        obj[‘author‘]=‘System‘;
        obj[‘type‘]=‘welcome‘;
        console.log(client.name + ‘ login‘);

        //返回欢迎语
        socket.emit(‘system‘,obj);
        //广播新用户已登陆
        socket.broadcast.emit(‘system‘,obj);
     }else{

        //如果不是第一次的连接，正常的聊天消息
        obj[‘text‘]=msg;
        obj[‘author‘]=client.name;
        obj[‘type‘]=‘message‘;
        console.log(client.name + ‘ say: ‘ + msg);

        // 返回消息（可以省略）
        socket.emit(‘message‘,obj);
        // 广播向其他用户发消息
        socket.broadcast.emit(‘message‘,obj);
      }
    });

    //监听出退事件
    socket.on(‘disconnect‘, function () {
      var obj = {
        time:getTime(),
        color:client.color,
        author:‘System‘,
        text:client.name,
        type:‘disconnect‘
      };

      // 广播用户已退出
      socket.broadcast.emit(‘system‘,obj);
      console.log(client.name + ‘Disconnect‘);
    });

});

//express基本配置
app.configure(function(){
  app.set(‘port‘, process.env.PORT || 3000);
  app.set(‘views‘, __dirname + ‘/views‘);
  app.use(express.favicon());
  app.use(express.logger(‘dev‘));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, ‘public‘)));
});

app.configure(‘development‘, function(){
  app.use(express.errorHandler());
});

// 指定webscoket的客户端的html文件
app.get(‘/‘, function(req, res){
  res.sendfile(‘views/chat.html‘);
});

server.listen(app.get(‘port‘), function(){
  console.log("Express server listening on port " + app.get(‘port‘));
});

var getTime=function(){
  var date = new Date();
  return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}

var getColor=function(){
  var colors = [‘aliceblue‘,‘antiquewhite‘,‘aqua‘,‘aquamarine‘,‘pink‘,‘red‘,‘green‘,
                ‘orange‘,‘blue‘,‘blueviolet‘,‘brown‘,‘burlywood‘,‘cadetblue‘];
  return colors[Math.round(Math.random() * 10000 % colors.length)];
}

4. 客户端实现

这里我们需要定义几个文件：chat.html, chat.js, jquery.min.js, main.css

1). views/chat.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket.io - Simple chat</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascripts/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/chat.js"></script>
</head>
<body>
<h1>Socket.io - Simple chat room</h1>
<div>
<span id="status">Connecting...</span>
<input type="text" id="input"/>
</div>
<div id="content"></div>
</body>
</html>

2). public/javascript/chat.js


$(function () {
var content = $(‘#content‘);
var status = $(‘#status‘);
var input = $(‘#input‘);
var myName = false;

//建立websocket连接
socket = io.connect(‘http://localhost:3000‘);
//收到server的连接确认
socket.on(‘open‘,function(){
status.text(‘Choose a name:‘);
});

//监听system事件，判断welcome或者disconnect，打印系统消息信息
socket.on(‘system‘,function(json){
var p = ‘‘;
if (json.type === ‘welcome‘){
if(myName==json.text) status.text(myName + ‘: ‘).css(‘color‘, json.color);
p = ‘<p style="background:‘+json.color+‘">system @ ‘+ json.time+ ‘ : Welcome ‘ + json.text +‘</p>‘;
}else if(json.type == ‘disconnect‘){
p = ‘<p style="background:‘+json.color+‘">system @ ‘+ json.time+ ‘ : Bye ‘ + json.text +‘</p>‘;
}
content.prepend(p);
});

//监听message事件，打印消息信息
socket.on(‘message‘,function(json){
var p = ‘<p><span style="color:‘+json.color+‘;">‘ + json.author+‘</span> @ ‘+ json.time+ ‘ : ‘+json.text+‘</p>‘;
content.prepend(p);
});

//通过“回车”提交聊天信息
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
if (!msg) return;
socket.send(msg);
$(this).val(‘‘);
if (myName === false) {
myName = msg;
}
}
});
});

3). public/javascript/jquery.min.js
从jquery官方下载: http://jquery.com/

4). public/css/main.css


* {padding:0px; margin:0px;}
body{font-family:tahoma; font-size:12px;margin:10px;}
p {line-height:18px;padding:2px;}
div {width:500px;}
#content {
    padding:5px;
    background:#ddd;
    border-radius:5px;
    border:1px solid #CCC;
    margin-top:10px;
}
#input {
    border-radius:2px;
    border:1px solid #ccc;
    margin-top:10px;
    padding:5px;
    width:380px;
}
#status {
    width:100px;
    display:block;
    float:left;
    margin-top:15px;
}

5. 完整案例代码

项目已经上传到github: https://github.com/bsspirit/chat-websocket

下载，安装，启动服务器


git clone https://github.com/bsspirit/chat-websocket.git
npm install
node app.js

打开浏览器
可以多打开几个窗口，模拟不同用户有的对话。

http://localhost:3000

做完实验，感觉棒极了。技术创新的革命！！

转载请注明出处：
http://blog.fens.me/nodejs-socketio-chat/

时间： 2024-11-19 12:50:40

Socket.io在线聊天室的相关文章

Node.js+socket.io在线聊天室

Node.js+socket.io实现在线聊天室,照着这个教程做的,稍加改动即可实现. Node.js:0.10.31 Express:3.* 创建工程chat: 添加几个文件,工程结构如下 代码: package.json: { "name": "application-name", "version": "0.0.1", "private": true, "scripts": { &

使用 Socket.IO 开发聊天室

前言 Socket.IO 是一个用来实现实时双向通信的框架,其本质是基于 WebSocket 技术. 我们首先来聊聊 WebSocket 技术,先设想这么一个场景: · 用户小A,打开了某个网站的充值界面,该界面上有一个付款的二维码. · 当小A 用某宝的 APP 扫码付款之后,网页要自动跳转到付款成功的界面.最简单的方法就是网页每隔一段时间就请求一次服务器--"怎么样?那货付款没有?","怎么样?还没付吗?","怎么样?这次总该付了吧". ·

nodejs 基于socket.io实现聊天室

由于之后要做的网页视频直播项目要用到socket.io模块,所以特地花时间研究了下,参照网上的代码做了些改进,自己写了个聊天室代码.不得不承认后端事实推送能力有点厉害,这是以前我用php一直苦恼的事情.下面简单介绍下我的项目,顺带讲解下nodejs. 事实上,在看别人写的代码之前,我一直不知道nodejs是干嘛的,直到真正接触到才明白这也可以算作是服务端代码,丰富的第三方库使其功能极其强大.它可以像golang的beego一样直接通过命令行开启服务器,不过要用到express模块.加载模块的方式

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

前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研究起来. 首先,先看一下node.js.本小白当时还以为是一个什么js的框架或者类库.结果才知道,原来完全不是那么回事. node.js 诞生于2009年,是一种轻量级的web服务.如果查看node.js的官网,真的非常简答,简短的几行代码,就搭建了一个web服务. var http = requi

基于Server-Sent Event的简单在线聊天室

一.Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时如果有人回答了我们的问题,知乎就会即时提醒我们,再比如现在电子商务的在线客服功能.这些能大大提高用户体验的功能都是基于Web即时通信实现的. 普通HTTP流程 客户端从服务器端请求网页 服务器作出相应的反应 服务器返回相应到客户端 而由于HTTP请求是无状态的,也就是说每次请求完成后,HTTP链

基于Socket的Android聊天室

1        基于Socket的Android聊天室 Socket通信是网络通信中最常用的技术之一,通过Socket建立的可靠连接,可以让多个终端与服务器保持通信,最典型的应用是建立一个多人聊天程序.本实例使用ServerSocket建立聊天服务器.将服务器端所有的通讯线程保存到一个集合当中,当有用户发来数据,则转发给所有用户,实现聊天室效果.Android端通过使用Socket建立客户端链接,并且在AsyncTask中执行网络读写的任务,将用户输入的内容发送到服务器,并接收服务器发来的数据

SignalR实现在线聊天室功能（欢迎、发送、回复、私信、屏蔽）

一.在线聊天室 1.新建解决方案 SignalROnlineChatDemo 2.新建MVC项目 SignalROnlineChatDemo.Web (无身份验证) 3.安装SignalR PM> install-package Microsoft.AspNet.SignalR 4. 创建一个称为 Startup.cs 的新类 1 public class Startup 2 { 3 public void Configuration(IAppBuilder app) 4 { 5 // 有关如何

Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室 获取保存用户信息）

简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现保存消息,历史消息和用户在线 由于,我这是在一个项目([无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目 目录索引)的基础上做的,所以使用到的一些借口和数据表,不详细解析,只是介绍一下思路和实现方式,供大家参考 用户登录注册信息 当用户登录之后,我们注册一下用户的信息,我们

java socket控制台版本聊天室程序源码下载

原文:java socket控制台版本聊天室程序源码下载 代码下载地址:http://www.zuidaima.com/share/1550463257578496.htm java socket控制台版本聊天室程序源码下载,学习的时候写的,适合学习java基础 java网络编程基础用 标签: java socket 控制台 聊天室 源码话题: 网络编程 java socket控制台版本聊天室程序源码下载,布布扣,bubuko.com