使用socket.io制做简易WEB聊天室


Posted in Javascript onJanuary 02, 2018

使用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聊天室

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP 输出缓存详解
2009/06/20 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
C语言编程题
2015/03/09 面试题
学习全国两会精神心得体会范文
2014/03/17 职场文书
促销活动总结模板
2014/07/01 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
工作后的感想
2015/08/07 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers