使用socket.io打造公共聊天室

 最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室。实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室。当然,我毫不犹豫选择了node来写,node有一个名叫socket.io的框架已经很完善的封装了socket相关API,所以无论是学习还是使用都是非常容易上手的,在这里强烈推荐!demo已经做好并放到我的个人网站了,大家可以试试,挺好玩的。

  进去试试 ->   http://www.yinxiangyu.com:9000  (改编了socket.io官方提供的例子)

  源码 ->  https://github.com/yxy19950717/js-practice-demo/tree/master/2016-4/chat

  在梳理整个demo之前,先来看看聊天室构建所要用到的原理性的东西。

  何为socket

  首先要很明确web聊天室客户端是如何与服务器进行通信的。没错,正是socket(套接字)对这样的通信负责。打个比方,如果你正使用你的计算机浏览页面,并且打开了1个telnet和1个ssh会话,那样你就有3个应用进程。当你的计算机中的运输层(tcp,udp)从底层的网络层接收数据时,它需要将接收到的数据定向到三个进程中的一个。而每个进程都有一个或多个套接字,它相当于从网络向进程传递数据和从进程向网络传递数据的门户。

  

  如上图,在接收端,运输层检查报文段中的字段,标识出接收套接字,进而将报文定向该套接字。这样将运输层报文段中的数据交付到正确的套接字的工作称为多路分解。同样在源主机从不同套接字中收集数据块,并为每个数据封装上首部信息(用于分解)从而生成报文段,然后将报文段传递到网络层,这样的工作叫做多路复用

  

  WebSocket与HTTP

  了解完socket套接字的基本原理,可以知道socket始终不是应用层的东西,它是连接应用层与传输层的一个桥梁,那从实现角度上考虑,我们应该如何来编写聊天室这样一个应用呢?

  HTTP是无状态的协议,何为无状态?就是指HTTP服务器并不保存关于客户的任何信息。因为TCP为HTTP提供了可靠数据传输服务,意味着一个客户进程发出的每个HTTP请求报文都能完整地到达服务器。HTTP的无状态的特点源于分层体系结构,它的优点也很明显,不用担心数据丢失。但也会出现这样的现象:服务器向客户发送被请求的文件,而不存储任何关于该客户的状态信息。也就是说当一个客户端接连两次请求同一个文件,服务器并不会因为刚刚为该客户提供了该文件而不再做出反应,而是重新发送,HTTP不记得之前做过什么事了

  当然在传统的HTTP应用中,客户端和服务器端时而需要在一个相当长的时间内进行通信,通常会带上cookie进行认证通信,而长时间保持一个连接,会耗费时间和带宽,这样一来,性能会不是很好,而聊天室需要的是实时通信,所以我们更需要WebSocket这样的协议。(部分浏览器还不支持WebSocket,在不是很追求实时的情况下,仍然可以采用HTTP中ajax的方式进行通信)。

  WebSocket是html5的一个新协议,它的出现主要是为了解决ajax轮询和long poll时给服务器带来的压力。在HTTP中,通过ajax轮询和Long poll是不断监听服务器是否有新消息,而在WebSocket中,每当服务器有新消息时才会推送,而且它能与代理服务器(一般来说是nginx或者apache)保持长久连接,但与HTTP不同的是,它只需要一次请求即可保持连接。

  而对于socket.io这个框架,它兼容了WebSocket以及HTTP两种协议的使用,在部分不能使用WebSocket协议的浏览器中,采用ajax轮询方式进行消息交换。

  若想对WebSocket做更多了解,可以阅读此文:  WebSocket 是什么原理?为什么可以实现持久连接?

  

  使用socket.io

  socket.io是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架,它包括了客户端的JavaScript和服务器端的Node.js。Socket.IO除了支持WebSocket通讯协议外,还支持许多种轮询(Polling)机制以及其它实时通信方式,并封装成了通用的接口,并且在服务端实现了这些实时机制的相应代码。Socket.IO实现的Polling通信机制包括Adobe
Flash Socket、AJAX长轮询、AJAX multipart streaming、持久Iframe、JSONP轮询等。Socket.IO能够根据浏览器对通讯机制的支持情况自动地选择最佳的方式来实现网络实时应用。

  有了这样一个框架,对于了解socket编程的你相信运用起来会非常容易上手了。socket.io的API可以在以下两个网站上进行学习

    github: https://github.com/socketio/socket.io

    官网: http://socket.io/docs/

  要打造一个聊天室应用,首先确定聊天中服务器需要接收的几个事件响应,分为如下几点:

    1.新用户进来时 (‘add user‘)

    2.用户正在输入时 (‘typing‘)

    3.用户停止输入时 (‘stop typing‘)

    4.用户发送消息时 (‘new message‘)

    5.用户离开时 (‘disconnect‘)

  其次是客户端的用户(们)需要接收到的事件响应:

    1.我进来了 (‘login‘)

    2.有人进来了 (‘user joined‘)

    3.有人正在输入 (‘typing‘)

    4.有人停止了输入 (‘stop typing‘)

    5.有人发送了新消息 (‘new message‘)

    6.有人离开了 (‘user left‘)

  接下来我们需要用socket的on和emit接口进行编写,服务器端代码如下:

  index.js:

  在客户端,也必须有接收发送消息的脚本

  main.js:

  了解socket运行只需关注socket.on,socket.broadcast.emit这几个函数。socket.on提供了接收消息的方法,接收到后,其第二个参数就是回调函数,而socket.broadcast.emit是广播发送,向每个用户发送一个对象或一个字符串。到这里你可能会觉得socket.io非常简单,当然这只是它的一些功能,更多用法大家可以自行学习。

  刚刚提供的这个例子改编于socket.io的官方实例,博主在写的时候对前端界面增加了头像选择,以及第一人称第三人称文字的排版布局改动,所以在main.js中可以代码有些繁杂(所以只用关注有socket.的地方),完整代码请到我的github上下载:
socket.io打造的公共聊天室

  最后,欢迎大家无聊的时候来我的聊天室聊天哦!

时间: 2024-10-18 10:39:38

使用socket.io打造公共聊天室的相关文章

node+express+socket.io制作一个聊天室功能

首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js 1 var http=require("http"); 2 var express=require("express"); 3 var sio=require("socket.io"); 4 5 var app=express(); 6 app.use(express.static(__dirname+

Socket编程(简易聊天室客户端/服务器编写、CocoaAsyncSocket)

Socket编程(简易聊天室客户端/服务器编写.CocoaAsyncSocket) 一.Socket 1.1 Socket简介 Socket就是为网络服务提供的一种机制.网络通信其实就是Socket间的通信,通信的两端都是Socket,数据在两个Socket间通过IO传输. 在Web服务大行其道的今天,调用Web服务的代价是高昂的,尤其是仅仅是抓取少量数据的时候尤其如此.而使用Socket,可以只传送数据本身而不用进行XML封装,大大降低数据传输的开销.Socket允许使用长连接,允许应用程序运

【Java】Socket+多线程实现控制台聊天室

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5827212.html 聊天室程序的结构图: 架构解释: Server服务器相当于一个中转站,Client客户端程序传送信息到服务器,服务器再把信息分发到其他客户端上,实现即时通信. 所需技术: 1:数据传输. 服务器与客户端之间的信息传递,都通过数据通道实现,有一个客户端连接到服务器,就有一条数据通道架设于该客户端和服务器之间. 这条数据通道通过Socket来实现:每个客户端通过一个socket与服务器建立

H5+MUI+Node.js+Socket.io实现即时聊天以及发送+图片压缩

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title

多线程+socket实现多人聊天室

最近在学习多线程的时候打算做一个简单的多线程socke聊天的程序,结果发现网上的代码都没有完整的实现功能,所以自己实现了一个demo: demo功能大致就是,有一个服务端负责信息转发,多个客户端发送消息,当一个客户端发送消息时,其他的客户端都可以接受到. 服务端: 客户端: 客户端代码: package com.cky.client; import java.io.IOException; import java.io.InputStream; import java.io.PrintWrite

socket.io多房间聊天

前面说了socket.io最基本的建立长连接,现在简单说一下多房间聊天. 关键点在 socket.join(roomid)加入一个房间 socket.leave(roomid);离开一个房间都是写在服务器上,具体代码示例如下:客户端: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sock

Socket实现多人聊天室-未完成

1.项目准备: 下面呢,我们就会按照这个流程图一步一步实现一个聊天室的功能.在开发的过程中,我们将使用到一个第三方库(github上下载). 在guthub上下载下来这个类库,然后把这两个文件直接拖入工程中. 聊天室呢,分服务端和客户端,我们依次来创建. 2.服务端: 我们接下来创建一个服务端的项目: 3.客户端:

socket网络套节字---聊天室

一:服务端: 1.创建客户端: package com.ywh.serversocket; import java.io.InputStream; import java.io.OutputStream; import java.net.Socket; import java.util.Set; public class LoginThread extends Thread { Socket client; boolean bl; //通过构造传入一个客户socket public LoginT

Android--使用socket通讯建立网络聊天室1

首先建立服务器端程序: 1.MyServerSocket.java package com.test.test; public class MyServerSocket { public static void main(String[] args) { new ServerListener().start(); } } 2.ServerListener.java用于监听端口连接 package com.test.test; import java.io.IOException; import