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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jQuery DOM操作实例
Mar 05 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
vue递归获取父元素的元素实例
Aug 07 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
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
jQuery事件对象总结
2016/10/17 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
Vue编写多地区选择组件
2017/08/21 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python相似模块用例
2016/03/04 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Series和DataFrame使用简单入门
2019/11/13 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
详解python itertools功能
2020/02/07 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
以权谋私检举信范文
2015/03/02 职场文书
2015年班干部工作总结
2015/04/29 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
初中生物教学反思
2016/02/20 职场文书
女性励志书籍推荐
2019/08/19 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL