使用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 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue看了就会的8个小技巧
Jan 21 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python栈类实例分析
2015/06/15 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
物流专员岗位职责
2014/02/17 职场文书
保险专业自荐信范文
2014/02/20 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
三峡大坝导游词
2015/01/31 职场文书
文明医院的标语集锦!
2019/07/24 职场文书