使用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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
如何抽象一个Vue公共组件
Oct 17 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
详解Vue的列表渲染
Nov 20 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 Token(令牌)设计
2008/03/15 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php中opendir函数用法实例
2014/11/15 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
28个JS验证函数收集
2010/03/02 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
jQuery实现日历效果
2020/09/11 jQuery
详解datagrid使用方法(重要)
2020/11/06 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
大学运动会通讯稿
2014/01/28 职场文书
写字楼租赁意向书
2014/07/30 职场文书
股东出资证明书范例
2014/10/04 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js