安装express插件



新建index.js

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res){

  res.send('<h1>Hello world</h1>');

});

http.listen(9000, function(){

  console.log('listening on *:9000');

});

使用node index.js运行

页面中展示

目前在index.js中我们是通过res.send返回一个HTML字符串，如果我们将整个应用的HTML代码都放到应用代码里，代码结构将变得混乱。

替代方法是新建一个index.html作为服务器响应

//index.js

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res){

//   res.send('<h1>Hello world</h1>');

res.sendFile(__dirname + '/index.html');

});

http.listen(9000, function(){

  console.log('listening on *:9000');

});

index.html中的内容为

<!doctype html>

<html>

  <head>

    <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>

  </body>

</html>

重新运行为



我们发送消息里面什么反应都没有

我们在这个里面集成Socket.io

Socket.io由两部分组成：

一个服务端用于集成或挂载到Node.jsHTTP服务器:socket.io

一个加载到浏览器中的客户端:socket.io-client

开发环境下,socket.io会自动提供客户端，安装socket.io



在index.js中添加模块



var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);

app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});

io.on('connection', function(socket){

  console.log('a user connected');

});

http.listen(9000, function(){

  console.log('listening on *:9000');

});

在index.html中添加

  <script src="/socket.io/socket.io.js"></script>

    <script>

    var socket = io();

    </script>

现在index.html为

<!doctype html>

<html>

  <head>

    <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="/socket.io/socket.io.js"></script>

    <script>

    var socket = io();

    </script>

  </body>

</html>

运行效果为



socket.io的核心理念是允许发送，接收任意事件和任意数据，任意能被编码为JSON的对象都可以用于传输，二进制也是支持的

在客户端中，我们捕获 chat message 事件，并将消息添加到页面中。现在客户端代码应该如下：

<!doctype html>

<html>

  <head>

    <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="/socket.io/socket.io.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

    <script>

    var socket = io();

    </script>

    <script>

        $(function () {

            var socket = io();

            $('form').submit(function(){

            socket.emit('chat message', $('#m').val());

            $('#m').val('');

            return false;

            });

            socket.on('chat message', function(msg){

            $('#messages').append($('<li>').text(msg));

            });

        });

    </script>

  </body>

</html>

index的代码为



var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);

app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});

io.on('connection', function(socket){

    socket.on('chat message', function(msg){

        io.emit('chat message', msg);

      });

});

http.listen(9000, function(){

  console.log('listening on *:9000');

});

运行项目为



本文学习自：https://www.w3cschool.cn/socket/socket-ulbj2eii.html

跟我一起使用socket.io创建聊天应用的更多相关文章

  1. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  2. 使用socket.io搭建聊天室

    最近在学习nodejs,需要找一些项目练练手.找来找去发现了一个聊天室的教程,足够简单,也能从中学到一些东西.下面记录我练习过程中待一些笔记. nodeJS模块 共用到了2个模块,express和so ...

  3. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  4. 使用 Socket.IO 开发聊天室

    前言 Socket.IO 是一个用来实现实时双向通信的框架,其本质是基于 WebSocket 技术. 我们首先来聊聊 WebSocket 技术,先设想这么一个场景: · 用户小A,打开了某个网站的充值 ...

  5. NodeJS + Socket.io搭建聊天服务器

    第一步:安装node git clone https://github.com/joyent/node.git cd node git checkout v0.10.33-release ./conf ...

  6. 我的学习笔记之node----node.js+socket.io实时聊天（2）

    废话不多说,直接贴代码吧.注释很详细了. 服务端代码: /** * Created by LZX on 2015/10/7. */(function () { var d = document, w ...

  7. 我的学习笔记之node----node.js+socket.io实时聊天（1） (谨此纪念博客开篇)

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

  8. Socket.io在线聊天室

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  9. nodejs+socket.io即时聊天实例

    在这之前你应该先安装好 Node.js,安装过程不再讲解 首先在你的电脑上创建一个新目录,姑且命名为 chat,然后在该目录创建两个文件,分别是 app.js 和 index.html. app.js ...

随机推荐

  1. Java-Class-@I：org.springframework.validation.annotation.Validated

    ylbtech-Java-Class-@I:org.springframework.validation.annotation.Validated 1.返回顶部   2.返回顶部 1. package ...

  2. Spring源码由浅入深系列五 GetBean

    获取bean的过程如上图所示.下一章将继续图示讲解createBean的过程.

  3. POJ 2763 /// 基于边权的树链剖分

    题目大意: 给定n个结点,有n-1条无向边,给定每条边的边权 两种操作,第一种:求任意两点之间路径的权值和,第二种:修改树上一点的权值. 因为是一棵树,可以直接把 u点和v点间(假设u为父节点,v为子 ...

  4. js中不同类型作比较

    示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...

  5. 21-2-substring

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 关于pip安装较慢的问题解决

    在 ~/.pip/ 下创建文件 pip.conf(如果还没有的话),并填入以下内容: [global] timeout = 6000 index-url = http://pypi.douban.co ...

  7. caffe安装 总结

    用的是matlab2018a,搞了一天 ubuntu 系统下的Caffe环境搭建 https://blog.csdn.net/hjimce/article/details/48781693 caffe ...

  8. Mysql查漏补缺

    Mysql查漏补缺 存储引擎 数据库使用存储引擎来进行CRUD的操作,不同的存储引擎提供了不同的功能.Mysql支持的存储引擎有InnoDB.MyISAM.Memory.Merge.Archive.F ...

  9. AM8后台历史数据手工清理方法

    AM8后台历史数据手工清理方法 数据清理目前通过bat脚本将windows任务计划来完成 Bat 路径位置: \ActiveSoft\Am8Svr\STKServer\Data    (请根据服务安装 ...

  10. Nginx启动报错误unlink() “nginx.pid” failed (2: No such file or directory)

    在修改了配置文件之后,启动nginx的时候发现,进程已经存在了,但是端口没有监听到. 查看错误日志,有如下错误信息 2015/10/22 21:39:06 [alert] 26434#0: unlin ...