使用socket.io制做简易WEB聊天室
使用socket.io做一个简单的WEB聊天室，可消息私发，供大家参考，具体内容如下
1. 创建一个空的工程目录
空的目录命名为chat-web
2. 创建package.json
使用命令：npm init,会引导你设置package.json的内容.
3.安装依赖包
使用命令：
npm install --save express npm install --save socket.io
安装完成后你会在工程目录看见有自动生成的node_modules文件夹
4.编写index.js脚本
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
console.log("dir:" + __dirname);
res.sendFile( __dirname + '/index.html');
});
//所有注册用户的socket集合（socketMap）
var sm = {};
io.on('connection', function(socket){
socket.on('chat-reg',function(data){
console.log("chat-reg:" + JSON.stringify(data));
//注册 ：data 格式：{user:"alisa"}
//消息 ：data 格式：{user:"alisa",msg:"@someone hello!!!"}
//格式说明：msg内容以@符号开头，以空格分隔用户名和消息体的说明是私聊
sm[data.user] = socket;
socket.emit('chat-reg',{code:200,msg:"reg success"});
});
socket.on('chat-data',function(data){
console.log("chat-data:" + JSON.stringify(data));
if(data.msg[0] == '@'){//以@符号开头，说明这句消息是私聊
//将消息显示在自己的聊天记录上
socket.emit('chat-data',data);
//查找第一个空格的位置
var i = data.msg.indexOf(' ');
//得到用户名
var u = data.msg.substring(1,i);
//得到消息体
var m = data.msg.substring(i,data.msg.length);
if(typeof sm[u] != 'undefined'){
//在socket集合中得到目标用户的socket，并且发送消息事件
sm[u].emit('chat-data',{user:data.user,msg:"[private]" + m});
}
}else{
//不是以@开头的消息发送给所有连接的用户
io.sockets.emit('chat-data',data);
}
});
});
//监听在3000端口
http.listen(3000, function(){
console.log('listening on:3000');
});
5.写index.html
<!doctype html>
<html>
<head>
<title>私人聊天室</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; }
#info{
height: 50px;
text-align: center;
line-height: 50px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div id="info"></div>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="http://cdn.bootcss.com/socket.io/1.7.1/socket.io.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
//页面加载的时候随机生成一个用户名
var user = "user" + Math.floor(Math.random()*1000);
//打开一个socket,io()方法可以有namespace参数，默认为`/`，具体用法见官方
var socket = io();
//发送一个用户注册事件，在服务器端注册用户名
socket.emit('chat-reg',{user:user});
//将用户名显示在信息栏
$("#info").text("您的用户名："+user);
$('form').submit(function(){
//发送聊天信息
socket.emit('chat-data', {user:user,msg:$('#m').val()});
$('#m').val('');
return false;
});
//监听服务端发送的聊天信息，并将其显示在页面中
socket.on('chat-data', function(data){
$('#messages').append($('<li>').text("[" + data.user + "]:" + data.msg));
});
//注册成功后，在控制台显示返回的信息
socket.on('chat-reg',function(data){
console.log(JSON.stringify(data));
});
</script>
</body>
</html>
6.测试
在控制台工程目录下运行node index.js.
在浏览器中访问：localhost:3000
你会看到下图
你可以多打开几个浏览器窗口，模拟多个用户。
赶紧动手试试效果吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于Nodejs利用socket.io实现多人聊天室
socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs
-
Node.js websocket使用socket.io库实现实时聊天室
认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部
-
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,
-
vue + socket.io实现一个简易聊天室示例代码
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服
-
使用socket.io实现简单聊天室案例
本文实例为大家分享了socket.io实现简单聊天室的具体代码,供大家参考,具体内容如下 1.客户端[index.html]代码: <body> <h3>socket简例</h3> <hr> <div id = 'app'> <div> <div> <ul> <li v-for = 'item in msgs'> {{item.name}}说:{{item.content}} </li>
-
使用socket.io制做简易WEB聊天室
使用socket.io做一个简单的WEB聊天室,可消息私发,供大家参考,具体内容如下 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置package.json的内容. 3.安装依赖包 使用命令: npm install --save express npm install --save socket.io 安装完成后你会在工程目录看见有自动生成的node_modules文件夹 4.编写index.js脚本 v
-
java+socket实现简易局域网聊天室
本文实例为大家分享了java+socket实现简易局域网聊天室的具体代码,供大家参考,具体内容如下 服务器端 ServerFrame.java package com.eze.chatroom.server; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.border.EmptyBorder; import javax.swing.JLabe
-
基于Python socket实现简易网络聊天室
目录 1.socket_ui.py 服务端 1-1. 依赖引用 1-2. 实现过程 1-3. 实现效果 2.client_ui.py 客户端 2-1. 依赖引用 2-2. 实现过程 2-3. 实现效果 在这个周末刚刚写出来的python桌面应用--网络聊天室,主要通过pyqt5作为桌面应用框架,socket作为网络编程的框架,从而实现包括客户端和服务端的网络聊天室的GUI应用,希望可以一起学习.一起进步! 应用包括服务端server_ui.py.客户端client_ui.py两个python模块
-
Springboot+netty实现Web聊天室
目录 一.项目的创建 二.代码编写 三.运行效果 一.项目的创建 新建Spring项目: 选择JDK版本: 选择Spring Web: 项目名称和位置的设置: 二.代码编写 导入.jar包: gson: https://search.maven.org/artifact/com.google.code.gson/gson/2.8.9/jar DemoApplication: package com.example.demo; import org.springframework.boot.Spr
-
基于Java Socket实现一个简易在线聊天功能（一）
最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到我们平台,以此做个记录,方便自己和大家使用. 先给大家说下实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持续发送消息: 2.结合线程,实现多客户端连接服务端发送消息: 3.实现服务端转发客户端消息至所有客户端,同时在客户端显示: 4.把awt组件生成的窗口界面改成前端jsp或者html展示的界面,java socket实现的客户端改为前端技术实现. 这里首
-
WebSocket实现Web聊天室功能
本文为大家分享了WebSocket实现Web聊天室的具体代码,供大家参考,具体内容如下 一.客户端 JS代码如下: /* * 这部分js将websocket封装起来 */ var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8080/GoodMan/ChatService"); } else { alert(
-
Java Socket+多线程实现多人聊天室功能
本文实例为大家分享了Java Socket+多线程实现多人聊天室的具体代码,供大家参考,具体内容如下 思路简介 分为客户端和服务器两个类,所有的客户端将聊的内容发送给服务器,服务器接受后,将每一条内容发送给每一个客户端,客户端再显示在终端上. 客户端设计 客户端包含2个线程,1个用来接受服务器的信息,再显示,1个用来接收键盘的输入,发送给服务器. import java.io.IOException; import java.io.InputStream; import java.io.Outp
-
Python socket C/S结构的聊天室应用实现
Python socket C/S结构的聊天室应用 服务端: #!/usr/bin/env python #coding:utf8 import socket,select def broadcast_data (sock,message): for socket in conn_list: if socket != server_socket and socket != sock : try : socket.send(message) except : socket.close() conn