使用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 中的replace方法说明
Apr 13 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
iview实现图片上传功能
Jun 29 Javascript
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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
php时间函数用法分析
2016/05/28 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
非常好的js代码
2006/06/27 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jquery禁用右键示例
2014/04/28 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python字符串的常用操作方法小结
2016/05/21 Python
python机器人行走步数问题的解决
2018/01/29 Python
python list转置和前后反转的例子
2019/08/26 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
经典c++面试题四
2015/05/14 面试题
介绍一下linux的文件系统
2012/03/20 面试题
优秀员工获奖感言
2014/03/01 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电