node.js 用socket实现聊天的示例代码


Posted in Javascript onOctober 17, 2017

本文介绍了node.js 用socket实现聊天的示例代码,分享给大家,也给自己留个笔记,具体如下:

服务器搭建

app.js

const http = require("http");
const express = require("./express");

//创建一个服务
const server = http.createServer(express);

//监听服务端口
server.listen(8001,()=>{
  console.log("服务端已经启动,请访问 http://localhost:8001");
});

express.js

const url=require("url");
const fs=require("fs");

function express(req,res){
  var urlObj=url.parse(req.url);
  //console.log(urlObj);

  var filePath="./www"+urlObj.pathname;
  var content="not found";
  if(fs.existsSync(filePath)){
    content=fs.readFileSync(filePath);
  }
  
  res.end(content.toString());
}


module.exports=express;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8"/>
    <title>Socket.IO chat</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; }
    </style>
   </head>
   <body>
    <ul id="messages"></ul>
    <form action="">
     <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="js/lib/jquery-1.11.1.js"></script>
    <script src="js/lib/socket.io.js"></script> 
    <script src="js/index.js"></script>
   </body>
</html>

客户端服务搭建与服务端通信

我们要建立服务端socket请求连接

io.on('connection', function(socket){
  console.log('a user connected');

  //断开连接
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

index.js

//客户端建立连接 
var socket = io(); 
客户端向服务端发送请求
index.js

$('form').submit(function(){
  //触发事件
  socket.emit('chat message', $('#m').val());
  $('#m').val('');
  return false;
 });

app.js

//接收客户端的信息
socket.on('chat message', function(msg){
  console.log('message: ' + msg);
});

将服务端的数据广播到客户端去

socket.on('chat message', function(msg){
    console.log('message: ' + msg);

    socket.broadcast.emit("clientE",msg);
  });

客户端接收服务端广播出来的数据

socket.on('clientE', function(msg){
  $('#messages').append($('<li>').text(msg));
});

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

Javascript 相关文章推荐
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
React组件的三种写法总结
Jan 12 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
Bootstrap图片轮播效果详解
Oct 17 #Javascript
vue组件之Alert的实现代码
Oct 17 #Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 #Javascript
vue-cli之router基本使用方法详解
Oct 17 #Javascript
教你用Cordova打包Vue项目的方法
Oct 17 #Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
CI框架中cookie的操作方法分析
2014/12/12 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python 字典的打印实现
2019/09/26 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
python批量修改文件名的示例
2020/09/27 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
护士自我评价
2014/02/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
百万英镑观后感
2015/06/09 职场文书