安装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. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  2. flutter 插件

    flutter_spinkit loading动画

  3. LeetCode 1041. Robot Bounded In Circle (困于环中的机器人)

    题目标签:Math 题目让我们判断机器人是否是一直在走一个圈. 当我们把 instructions 走完一遍时候: 1. 如果机器人回到了原点,那么它是在走一个圈. 2. 如果机器人的方向没有改变,那 ...

  4. scrapy的使用-LinkExtractor

    背景: 在爬取网站信息是需要获取特定标签下的某些内容,就需要获取这些标签下的链接,如果获取每一个,在通过这个获取它下面的信息,这样效率会很低,时间复杂度O(n^2),但如果先获取链接,再获取内容,则时 ...

  5. java 迷你DVD管理器

    1.DvdSet类 package dvd_01; /** * 定义dvd的一些属性 * @author Administrator * */ public class DvdSet { String ...

  6. 百度开平台BAE搭建网站

    百度开平台BAE搭建网站 一.注册:在百度云注册账号,并且登陆 然后实名验证 二.开始搭建 三.部署项目:我们来把我们的项目提交上去 填写百度云的账号密码 四.删除:删除部署项目 以上就是百度开平台B ...

  7. python 的打开、读、写、追加操作

    读f = open('D:\最新全栈python第2期视频教程 全套完整版\day08-python 全栈开发-基础篇\新建文本文档.txt','r') # data = f.read(10000)# ...

  8. PokerNet-poker recognition: 扑克识别 （6）

    文章目录 准备 最终结果 未来改进 准备 机器: Titan XP 12GB, 64GB RAM, 机器非常强,可靠. 下次有机会购买RTX 2080 Ti 试试 最终结果 错误率可以达到万分之一,非 ...

  9. windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问

    windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问: 解决方法: 首先重命名系统盘 windows目录下的代号为“SoftwareDistribu ...

  10. Got permission denied while trying to connect to the Docker daemon

    答案:https://stackoverflow.com/questions/48568172/docker-sock-permission-denied