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中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
javascript复制对象使用说明
Jun 28 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php批量删除数据
2007/01/18 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
简单易懂的python环境安装教程
2017/07/13 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
快速了解Python中的装饰器
2018/01/11 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python实现淘宝购物系统
2019/10/25 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python和Bash结合在一起的方法
2020/11/13 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
大专学生推荐信范文
2013/11/19 职场文书
旅游网创业计划书
2014/01/31 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
公司表扬信格式
2015/05/04 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL