使用socket.io做一个简单的WEB聊天室(可消息私发)

1. 创建一个空的工程目录

空的目录命名为chat-web

2. 创建package.json

使用命令：npm init,会引导你设置package.json的内容.

3.安装依赖包

使用命令：
npm install --save express
npm install --save socket.io

安装完成后你会在工程目录看见有自动生成的node_modules文件夹

4.编写index.js脚本

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);app.get('/', function(req, res){console.log("dir:" + __dirname);res.sendFile( __dirname + '/index.html');
});
//所有注册用户的socket集合（socketMap）
var sm = {};
io.on('connection', function(socket){socket.on('chat-reg',function(data){console.log("chat-reg:" + JSON.stringify(data));//注册 ：data 格式：{user:"alisa"}//消息 ：data 格式：{user:"alisa",msg:"@someone hello!!!"}//格式说明：msg内容以@符号开头，以空格分隔用户名和消息体的说明是私聊sm[data.user] = socket;socket.emit('chat-reg',{code:200,msg:"reg success"});});socket.on('chat-data',function(data){console.log("chat-data:" + JSON.stringify(data));if(data.msg[0] == '@'){//以@符号开头，说明这句消息是私聊//将消息显示在自己的聊天记录上socket.emit('chat-data',data);//查找第一个空格的位置var i = data.msg.indexOf(' ');//得到用户名var u = data.msg.substring(1,i);//得到消息体var m = data.msg.substring(i,data.msg.length);if(typeof sm[u] != 'undefined'){//在socket集合中得到目标用户的socket，并且发送消息事件sm[u].emit('chat-data',{user:data.user,msg:"[private]" + m});}}else{//不是以@开头的消息发送给所有连接的用户io.sockets.emit('chat-data',data);}});
});
//监听在3000端口
http.listen(3000, function(){console.log('listening on:3000');
});

5.写index.html

<!doctype html>
<html>
<head><title>私人聊天室</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body { font: 13px Helvetica, Arial; }form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }#messages { list-style-type: none; margin: 0; padding: 0; }#messages li { padding: 5px 10px; }#messages li:nth-child(odd) { background: #eee; }#info{height: 50px;text-align: center;line-height: 50px;background-color: #333;color: white;}</style>
</head>
<body><div id="info"></div><ul id="messages"></ul><form action=""><input id="m" autocomplete="off" /><button>Send</button></form><script src="http://cdn.bootcss.com/socket.io/1.7.1/socket.io.min.js"></script><script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script>//页面加载的时候随机生成一个用户名var user = "user" + Math.floor(Math.random()*1000);//打开一个socket,io()方法可以有namespace参数，默认为`/`，具体用法见官方var socket = io();//发送一个用户注册事件，在服务器端注册用户名socket.emit('chat-reg',{user:user});//将用户名显示在信息栏$("#info").text("您的用户名："+user);$('form').submit(function(){//发送聊天信息socket.emit('chat-data', {user:user,msg:$('#m').val()});$('#m').val('');return false;});//监听服务端发送的聊天信息，并将其显示在页面中socket.on('chat-data', function(data){$('#messages').append($('<li>').text("[" + data.user + "]:" + data.msg));});//注册成功后，在控制台显示返回的信息socket.on('chat-reg',function(data){console.log(JSON.stringify(data));});</script>
</body>
</html>

6.测试

在控制台工程目录下运行node index.js.
在浏览器中访问：localhost:3000
你会看到下图

你可以多打开几个浏览器窗口，模拟多个用户。
赶紧动手试试效果吧。

使用socket.io做一个简单的WEB聊天室相关推荐

Spring和WebSocket整合并建立简单的Web聊天室
Spring和WebSocket整合并建立简单的Web聊天室官方主页 Spring WebSocket 一.概述 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. Web ...
WebSocket实现简单的web聊天室
WebSocket实现简单的web聊天室 1.需要Tomcat7.0所以服务器 2.需要JDK7.0 3.手工加入Tomcat7.0中lib目录下的一下三个包catalina.jar.tomcat-c ...
实现一个简单的语音聊天室（源码）
语音聊天室,或多人语音聊天,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 这篇文章将实现一个简单的语音聊天室,让多个人可以进入同一个房间进行语音沟通.先看运行效果截图: ...
实现一个简单的视频聊天室（源码）
在 <实现一个简单的语音聊天室>一文发布后,很多朋友建议我也实现一个视频聊天室给他们参考一下,其实,视频聊天室与语音聊天室的原理是差不多的,由于加入了摄像头.视频的处理,逻辑会繁杂一些,本 ...
实现一个简单的语音聊天室（多人语音聊天系统）
多人语音聊天,或语音聊天室,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 本文将基于最新版本的OMCS(V3.5)实现一个简单的语音聊天室,让多个人可以进入同一个房间进 ...
php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）
通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能.附带详细源码案例.这个聊天室是一个简单的聊天室,通过javascript setInterval() ...
用jmeter做一个简单的web性能测试
下面用jmeter演示一个简单的性能测试计划,让初学者快速上手. 下面直接上步骤: (1)打开jmeter,右击测试计划--添加线程--添加线程组,线程数为5(即5个用户) (2)导出数据接口会校验用 ...
实现一个简单的WebSocket聊天室
WebSocket 简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主 ...
java控制层创建websocket_用Java构建一个简单的WebSocket聊天室
前言首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...

使用socket.io做一个简单的WEB聊天室