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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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 array_merge函数
2014/08/31 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php中fsockopen用法实例
2015/01/05 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
javascript中的几个运算符
2007/06/29 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
用python解压分析jar包实例
2020/01/16 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
后勤工作职责
2013/12/22 职场文书
交通事故和解协议书
2015/01/27 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
oracle索引总结
2021/09/25 Oracle
Python实现Hash算法
2022/03/18 Python