使用socket.io实现简单聊天室案例
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了使用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./vue/2.5.9/vue.min.js'></script> <script type="text/javascript" src = 'https://cdn.bootcss./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') ; }) ;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程