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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python中的With语句的使用及原理
2020/07/29 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
行政总经理岗位职责
2013/12/05 职场文书
会计专业求职信范文
2014/03/16 职场文书
司机工作自我鉴定
2014/09/19 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
实习工作表现评语
2014/12/31 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
升学宴学生致辞
2015/07/27 职场文书
化工生产实习心得体会
2016/01/22 职场文书
在js中修改html body的样式
2021/11/11 Javascript