使用socket.io实现简单聊天室案例


Posted in Javascript onJanuary 02, 2018

本文实例为大家分享了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') ;  
}) ;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
You might like
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
PHP面试题集
2016/12/18 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
医学生自荐信范文
2013/12/03 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
道歉的话怎么说
2015/05/12 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis