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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
javascript实现简单页面倒计时
Mar 02 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如何实现Socket服务器
2015/09/23 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
jQuery 操作XML入门
2008/12/25 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
python如何实现反向迭代
2018/03/20 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python对html过滤处理的方法
2018/10/21 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
python处理写入数据代码讲解
2020/10/22 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
生产内勤岗位职责
2013/12/07 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
淘宝活动策划方案
2014/02/06 职场文书
个人租房协议书
2014/04/09 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
教师个人发展总结
2015/02/11 职场文书
七一活动主持词
2015/06/29 职场文书
驻村工作简报
2015/07/20 职场文书
python requests模块的使用示例
2021/04/07 Python
Linux中文件的基本属性介绍
2022/06/01 Servers