Node.js和Socket.IO搭建Web Chat application

kviccn 发布于2019-08-20 16:30 / 2099人阅读

摘要：是，是的，它可以建立起一个基于事件的实时的双向交流方式，极大的简化了的处理过程。开始搭建这个应用几乎只需要和最初级的知识，因为只搭建一个基本的程序。安装好后创建一个，来配置应用。

WebSocket与Socket.IO

WebSocket是一种协议，有了它就可以在TCP协议的基础上在浏览器和服务器之间建立起了一种全双工的通道，它完全兼容HTTP协议，有了它使得Web应用程序可以在浏览器和服务器之间进行实时的交互，现在主流浏览器都支持这种协议。

Socket.IO是JavaScript library，是Node.js的module，它可以建立起一个基于事件的实时的双向交流方式，极大的简化了WebSocket的处理过程。在这个Chat application中将会用到它。

开始Chat application

搭建这个应用几乎只需要Node.js和Socket.IO最初级的知识，因为只搭建一个基本的程序。

web 框架

最初的构想是一个简单的HTML页面，由一个表单和消息列表组成，要使用Node.js和express框架，首先确保Node.js已经安装好了。

首先创建项目目录chat-example文件夹，然后在里边创建package.json文件来描述项目信息以及依赖。

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

然后到命令行cd到项目目录安装express，npm install --save express
--save参数可以把自动把express添加到package.json的dependencies中。
express安装好后创建一个index.js，来配置应用。

//index.js
var app = require("express")();
var http = require("http").Server(app);

app.get("/", function(req, res){
  res.send("Hello world");
});

http.listen(3000, function(){
  console.log("listening on *:3000");
});

上边代码可以这样翻译一下：

Express初始化了一个函数句柄可以应用于HTTP server于第2行

定义一个路由来访问网站首页

开启http服务监听3000端口

在命令行中node index.js得到如下结果：

到浏览器中访问http://localhost:3000结果如下：

之前我们使用res.send("

Hello world

");来传递html字符串，如果文档内容多了这样做就有点low了，换种方式新建一个index.html文件，访问它就可以了。

首先来重构之前的路由：

app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
});

然后创建index.html



  
    Socket.IO chat

重启服务，到浏览器查看是这个样子：

把Socket.IO引入

Socket.IO由2部分组成：

服务端Node.JS HTTP Server： socket.io

浏览器端的js库：socket.io-client

接下来npm install --save 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(3000, function(){
  console.log("listening on *:3000");
});

注意通过把http(the HTTP server)对象传递给socket.io初始化了一个socket.io的实例，然后监听connection事件，并且在控制台中打印出来

在index.html的之前增加如下几行：

这就是用来加载socket.io-client的，暴露出一个全局的io，然后connect
注意我调用io()的时候并没有指定任何的URL，因为它默认就是去当前跑的页面去和server连接
重启服务，多开几个页面，在控制台中可以看到如下结果:

每个socket还有一个特殊的disconnect事件：

io.on("connection", function(socket){
  console.log("a user connected");
  socket.on("disconnect", function(){
    console.log("user disconnected");
  });
});

发射事件

Socket.IO的主要想法就是你能够发射和接收任何你喜欢的事件，任何对象都会被编码成Json，也支持二进制数据

那接下来就做我们发送信息的时候server接收到chat message事件，index.html中的script部分改写如下：

在index.js中我们打印出chat message事件

io.on("connection", function(socket){
  socket.on("chat message", function(msg){
    console.log("message: " + msg);
  });
});

在浏览器端发射，控制台观察如下：

广播消息Broadcasting

接下来的目标是从server发送消息给其余的在线用户，为了能把消息传递给everyone，Socket.IO给我们提供了io.emit

io.emit("some event", { for: "everyone" });

如果你想发消息给everyone，除去一个特定的socket，那就快用broadcast 标志吧

io.on("connection", function(socket){
  socket.broadcast.emit("hi");
});

像下面这样就能把消息发给所有人，包括消息的发送者

io.on("connection", function(socket){
  socket.on("chat message", function(msg){
    io.emit("chat message", msg);
  });
});

下面到客户端捕获chat message事件，把消息内容插到消息列表中：

到浏览器多开几个选项卡就可以疯狂的发射和接收消息了，非常实时，短短20几行代码就能实现这样的效果，真是令人发指啊！

总结

哈哈，其实这个例子是socket.io官网的小栗子，喜欢学英语的朋友可以去玩一下，那里的video演示很直观，你可以戳这里socket.io-Chat

云服务器 GPU云服务器搭建 node.js 云主机搭建 node.js 云vps webrtc node.js服务搭建搭建 node.js 云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82953.html

零基础搭建网页聊天室（socket.io使用教程）

摘要：本文实际为翻译官方教程开始吧，我们做个聊天应用在这个教程里，我们将制作一个简单的网页聊天应用。它机会不要求你有任何关于或的基础，所以这份教程适合任何水平的开发者。介绍曾经写一个网页聊天应用可能会用到网页工具套件，那时候非常困难。本文实际为翻译Socket.io官方教程——《Get Started: Chat application》开始吧，我们做个聊天应用！在这个教程里，我们将制...

madthumb 2019-08-19 18:06 评论0 收藏0
socket.io+express实现聊天室的思考（一）

摘要：但是需要注意的一点是协议是建立在协议基础之上的，需要经过一次握手。所以连接的发起方仍是客户端。是一个简洁而灵活的应用框架提供一系列强大特性帮助你创建各种应用。这也是为什么要采用协议来实现聊天室的原因。从开始写到完善差不多断断续续差不多半个月时间，虽然还没有打到想要的效果但还是阶段性总结一下。（下一步加入打算视频通讯功能）本文默认你已掌握 node 相关基础知识 GitHub地址：ht...

fjcgreat 2019-08-21 12:00 评论0 收藏0
node.js 用socket实现聊天

摘要：用实现聊天服务器搭建创建一个服务监听服务端口服务端已经启动请访问客户端服务搭建与服务端通信我们要建立服务端请求连接断开连接客户端建立连接客户端向服务端发送请求触发事件接收客户端的信息将服务端的数据广播到客户端去客户端接收服务 node.js 用socket实现聊天服务器搭建 app.js const http = require(http); const express = requ...

stdying 2019-08-21 17:03 评论0 收藏0
websocket笔记以及一个微型聊天室例子

摘要：收到包后，向发送一个值为，该包发送完成后，和均进入状态。非强制压缩发送。因此也就诞生了一个新的通信协议协议，一种全双工通信协议。会发起一个握手的请求，请求首部含有还有其他首部，具体看如下示例。服务器端返回一个状态码，确认转换协议。首先说明：这里的tomcat用的是tomcat8.0.36,并不适合tomcat7以及以下版本，（没办法websocket的api一直在变，到8之后貌似稳定...

zzbo 2019-08-14 14:41 评论0 收藏0