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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
关于this和self的使用说明
Aug 01 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 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
我的论坛源代码(九)
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Python有参函数使用代码实例
2020/01/06 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
业务员的岗位职责
2014/03/15 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
学校师德承诺书
2014/05/23 职场文书
电子商务求职信
2014/06/15 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书