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的Boolean对象初始值示例
Mar 04 Javascript
javascript快速排序算法详解
Sep 17 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
数组Array的排序sort方法
Feb 17 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
layui实现三级导航菜单
Jul 26 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
JavaScript实现下拉列表
Jan 20 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
javascript闭包入门示例
2014/04/30 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
详解python3中zipfile模块用法
2018/06/18 Python
解读python如何实现决策树算法
2018/10/11 Python
python assert的用处示例详解
2019/04/01 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
党性分析自查总结
2014/10/14 职场文书
国庆阅兵观后感
2015/06/15 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang