使用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>
</ul>
</div>
<div>
<p><input type="text" v-model = 'msg'><button @click = 'm_send()'>发送</button></p>
</div>
</div>
</div>
<script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.9/vue.min.js'></script>
<script type="text/javascript" src = 'https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js'></script>
<script type="text/javascript">
var _vm = new Vue({
data : {
name : '用户',
msg : '',
msgs : [],
},
methods : {
m_send : function() {
// 向客户端发送消息
socket_client.emit('say_client', {
name : this.name,
content : this.msg
}) ;
this.msg = '' ;
}
}
}).$mount('#app') ;
// socket服务器
var socket_client = io.connect('http://127.0.0.1:3000') ;
/**
* 监听服务端发来的消息
*
* 1、“say_server”是客户端发出信息时的key值
* 2、“res”是客户端传来的value值
*/
socket_client.on('say_server' ,function(res){
console.log('服务端发来的消息为：', res) ;
_vm.msgs.push(res);
});
</script>
</body>
2、服务端【app.js】代码：
const http = require('http') ;
const server = http.createServer() ;
// web服务器
const express = require('express') ;
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8888, function () {
console.log('web服务器成功启动了，IP：127.0.0.1，端口号：8888') ;
});
// socket服务器
const socketio = require('socket.io') ;
const socket_server = socketio(server) ;
// 建立和客户端的socket连接
socket_server.on('connection', function(client) {
// console.log(client) ; // 查看连接进来的客户端对象内容
// console.log(Object.keys(client)) ; // 查看连接进来的客户端对象的关键key值
/**
* 监听客户端发来的消息
*
* 1、“say_client”是客户端发出信息时的key值
* 2、“res”是客户端传来的value值
*/
client.on('say_client', function(res) {
console.log('客户端发来的消息为：', res) ;
// 向客户端发送消息
socket_server.emit('say_server', res) ;
}) ;
}) ;
server.listen(3000, function() {
console.log('socket服务器成功启动了，IP：127.0.0.1，端口号：3000') ;
}) ;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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,
-
使用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
-
基于Nodejs利用socket.io实现多人聊天室
socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs
-
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>
-
Android Socket通信实现简单聊天室
socket通信是基于底层TCP/IP协议实现的.这种服务端不需要任何的配置文件和tomcat就可以完成服务端的发布,使用纯java代码实现通信.socket是对TCP/IP的封装调用,本身并不是一种协议,我们通过socket来调用协议来跟服务端进行通信和数据的传输.socket就像客户端与服务端之间的一条信息通道,每一个不同的客户端都会建立一个独立的socket,双方都没有关闭连接的话,连接-也就是建立好的这条socket通道将一直保持,服务端要跟那一个客户端通信只需要找到对应的socket对
-
C++基于socket UDP网络编程实现简单聊天室功能
本文实例为大家分享了C++基于socket UDP实现简单聊天室功能的具体代码,供大家参考,具体内容如下 0.通信步骤流程图 (左:服务器:右:客户端:) 1.服务器代码 1.1服务器类头文件(CServer_UDP.h) #pragma once #include <winsock2.h> class CServer_UDP { public: CServer_UDP(); void SendMsg(const char sendBuf[]); void RecMsg(); ~CServer
-
C#基于Socket的TCP通信实现聊天室案例
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 一.Socket(套接字)通信概念 套接字(socket)是通信的基石,用于描述IP地址和端口,是一个通信链的句柄,可以用来实现不同虚拟机或不同计算机之间的通信,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议端口,远地主机的IP地址,远地进程的协议端口. 应用层通过传输层进行数据
-
Python socket实现简单聊天室
本文实例为大家分享了Python socket实现简单聊天室的具体代码,供大家参考,具体内容如下 服务端使用了select模块,实现了对多个socket的监控.客户端由于select在Windows下只能对socket使用,所以使用了多线程来实现对客户端输入和socket连接的同时监控.注意这里的socket设置为了非阻塞.这样就实现了在一个线程中同时进行socket的接收和发送. 服务器代码: # -*- coding: utf-8 -*- import socket,select conne
-
Python基于Socket实现简单聊天室
本文实例为大家分享了Python基于Socket实现简单聊天室,供大家参考,具体内容如下 服务端 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/7/27 15:34 # @File : Server.py """ 聊天室服务端 """ import socket,select host='' port=7799 addr=(host,port) inputs=[] mem
-
java实现简单聊天室单人版
本文实例为大家分享了java实现简单聊天室的具体代码,供大家参考,具体内容如下 先整理下思路: 1.创建一个通信服务端,传入端口号和相关的流后等待客户端连接,并初始化图形界面. 2.创建一个JFrame,用于写出聊天的界面,这里界面名称由其他类传入. 3.把客户端创建的方法写进JFrame(当然这里很粗糙的方法) 4.设置按钮的监听事件,发送消息和离线功能 首先创建一个服务端的类 import java.io.IOException; import java.net.ServerSocket;
-
java基于netty NIO的简单聊天室的实现
一.为何要使用netty开发 由于之前已经用Java中的socket写过一版简单的聊天室,这里就不再对聊天室的具体架构进行细致的介绍了,主要关注于使用netty框架重构后带来的改变.对聊天室不了解的同学可以先看下我的博客(<JAVA简单聊天室的实现>) 本篇博客所使用的netty版本为4.1.36,完整工程已上传到Github(https://github.com/Alexlingl/Chatroom),其中lib文件夹下有相应的netty jar包和source包,自行导入即可. 1.为何要
-
JAVA NIO实现简单聊天室功能
本文实例为大家分享了JAVA NIO实现简单聊天室功能的具体代码,供大家参考,具体内容如下 服务端 初始化一个ServerSocketChannel,绑定端口,然后使用Selector监听accept事件. 当有accept发生时,表示有客户端连接进来了,获取客户端的SocketChannel,然后注册其read事件:用来接收客户端发送的消息. package chatroom; import java.io.IOException; import java.net.InetSocketAddr
-
SpringBoot+Netty实现简单聊天室的示例代码
目录 一.实现 1.User类 2.SocketSession类 3.SessionGroup 4.WebSocketTextHandler类 5.WebSocketServer类 6.index.html 二.效果 一.实现 1.User类 import java.util.Objects; public class User { public String id; public String nickname; public User(String id, Strin