Nodejs简易聊天室socket.io

Mon, 30 Jun 2025 15:15:52 +0000

初步的了解了一下Socket.io这个感觉还是很好用的，

几步简单的connect，以前觉得聊天室是一个很复杂而又很复杂的东西今天，就一天的时间，不，是一个下午的时间，就出来一个聊天室。

感觉这个可以批量生产了，so happy，借此分享给大家享受一下。

代码放到git上了，给个简单的安装使用步骤：

下载后在项目目录下执行：

npm install

执行完之后，执行如下的命令：

npm start

然后试着打开浏览器，访问http://127.0.0.1:3000

Socket.io 1.3.5 and express.js 4.12.2 结合搭建

Mon, 30 Jun 2025 15:15:45 +0000

可以在app.js同目录下建立一个文件，如io.js

里面的代码如下：

var io = require('socket.io')();
//这段代码可以随意自己修改，根据业务需求来定
io.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
 console.log(data);
 });
});
module.exports = io;

下一步就是修改bin/www这个文件（省略号代表还有其他的代码）

var app = require('../app');

var io = require('../io');//这里引入刚才加的文件

var server = require('http').Server(app);

io.attach(server);//加入这段代码
server.listen(8080);

前端的代码需要这样写：

<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function(){
 var socket = io();//这里是注意点
socket.on('news', function (data) {
console.log(data);
});
});
</script>

好了大功告成！

Socket IO 实现聊天室

Mon, 30 Jun 2025 11:49:19 +0000

没想到，自己写过的第一个聊天室，居然是用nodejs实现的【因为简单的啊】，使用起来很简单，要剖析里面的原理才是最重要的

先看代码：

html代码

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

js代码

/**
 * Created by davidzhang on 14-10-22.
 */
$(function(){
 var content = $('#content');
 var status = $('#status');
 var input = $('#input');
 var myName = false;
 
 //建立socket链接
 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 false;
 socket.send(msg);
 $(this).val('');if(myName==false){myName=msg}}})});

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;
}

服务器端的代码

var express = require('express');
var path = require("path");
var app = express();
var server = require("http").createServer(app);
var io = require("socket.io").listen(server);
 
//设置日志级别
io.set("log level", 1);
 
io.on('connection',function(socket){
 socket.emit("open");
 
 //构造客户端对象
 var client = {
 socket:socket,
 name:false,
 color:getColor()
 }
 
 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());
});
 
//指定websocket的客户端的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)];
}

这里的服务器是使用nodejs的express，当然里面使用的是nodejs的socket.io这个库，使用起来是很酷的，大家可以操作一下。

如果想需要真个代码的话，可以去这里

https://github.com/zhangda89/Socket-chat-Room

SocketIO on Dapeng Zhang

Nodejs简易聊天室socket.io

Socket.io 1.3.5 and express.js 4.12.2 结合搭建

Socket IO 实现 聊天室

Socket IO 实现聊天室