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 相关文章推荐
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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 之入门篇
2006/12/04 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
使用js实现数据格式化
2014/12/03 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
通过Pandas读取大文件的实例
2018/06/07 Python
django Serializer序列化使用方法详解
2018/10/16 Python
tensorflow 模型权重导出实例
2020/01/24 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
三年级音乐教学反思
2014/01/28 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
代办社保委托书范文
2014/10/06 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
人民币符号
2022/02/17 杂记
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS