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插件之打造自定义的select标签
Nov 30 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
Node调用Java的示例代码
Sep 20 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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生成随机数或者字符串的代码
2008/09/05 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
JavaScript Date对象详解
2016/03/01 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python requests库用法实例详解
2018/08/14 Python
python 重命名轴索引的方法
2018/11/10 Python
Python3 修改默认环境的方法
2019/02/16 Python
简单了解python变量的作用域
2019/07/30 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python如何实现图片压缩
2020/09/11 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
护士实习求职信
2014/06/22 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Python打包exe时各种异常处理方案总结
2021/05/18 Python