安装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. [C#]记录一次异常排查，关于using语法、sqlserver数据库session、DBHelper类

    最近在做一个基于asp.net和sqlserver的网站项目,发现网站运行一段时间之后,会报异常: 超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 ...

  2. 阿里云ecs(phpstudy一件包）

            选择语言       保存并连接    Linux硬盘挂载是比较常见的管理操作之一.默认情况下数据盘没有挂载,需要手动挂载到系统中.     具体操作是分三步:     硬盘挂载1)需 ...

  3. Hadoop安装成功之后，访问不了web界面的50070端口怎么解决？

    Hadoop安装成功之后,访问不了web界面的50070端口 先查看端口是否启用 [hadoop@s128 sbin]$ netstat -ano |grep 50070 然后查看防火墙的状态,是否关 ...

  4. Game of Taking Stones && POJ1259 /// 最大空凸包 几何+DP

    题目大意: 给定n个点 求出这n个点中最大空凸包的面积 只放个模板 一份模板过两题(滑稽 这个讲解够详细了 https://blog.csdn.net/nyroro/article/details/4 ...

  5. 搭建jeecg-boot项目运行

    实验版本: 2.0.2(发布日期:20190708) 项目地址:https://github.com/zhangdaiscott/jeecg-boot 说明文档:http://jeecg-boot.m ...

  6. 终于搭好了WinCE上MFC的SDK环境

    终于可以我的嵌入式之旅了,幸福啊...

  7. PHP算法之增减字符串匹配

    给定只含 "I"(增大)或 "D"(减小)的字符串 S ,令 N = S.length. 返回 [0, 1, ..., N] 的任意排列 A 使得对于所有 i ...

  8. 怎样查询Vultr当月账单和历史账单

    关于Vultr账单的问题,Vultr是可以查看当月的实时账单,也可以查看历史账单,下面就教大家查看账单的方法. 一.查看Vultr当月账单 首先我们要进入Vultr官网,登录自己的Vultr账号,登录 ...

  9. php 引用文件

    require_once :为了避免重复加载文件. 用意:加载文件一次. require_once() 语句在脚本执行期间包括并运行指定文件.此行为和require()语句类似,唯一区别是:如果该文件 ...

  10. 关于OpenLiveWriter出错的修补方法

    OpenLiveWriter使用一段时间后可能会打不开,提示错误如下: 这是只需要把电脑的.net更新到4.6以上版本就可以了.